.plans-section {
  .plans-header {
    font-size: 2.25rem;
  }

  .bg-light-pink {
    background-color: #ac4b98;
  }

  .text-light-pink {
    color: #ac4b98 !important;
  }

  .bg-dark-pink {
    background-color: #4a2c4b;
  }

  .text-dark-pink {
    color: #4a2c4b !important;
  }

  .plans-wrapper {
    display: flex;
    flex-direction: column;
    font-family: 'Roboto', sans-serif;

    #corporate-plan {
      order: -1;
    }

    header {
      font-size: 2rem;
    }

    @media screen and (min-width: 1024px) {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(1fr, 330px));
      min-height: 30rem;
      padding: 2rem;

      #individual-plan,
      #school-plan {
        grid-row: span 9 / 10;
        min-height: calc(4rem - 6px);

        header {
        }
      }

      #corporate-plan {
        order: 0;
        grid-row: span 10 / 10; /* Make this card taller by spanning two rows */
        border-radius: 0.5rem;

        .plan-body {
          border-right: none;
          border-left: none;
        }
      }
    }

    .plan-card {
      transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
      background: #f6f6f6;
      min-height: 50dvh;
      position: relative;
      margin: 0 10px;

      .plan-card-inner {
        background-color: #663399;
        border-radius: 0.5rem;
        font-family: 'Roboto', sans-serif;
      }

      .plan-body {
        border-top: none;
        flex: 1;
        background-color: #f6f6f6;

        p,
        ul li {
          font-size: 0.875rem !important;
          margin-bottom: 5px;
        }

        ul {
          color: #663399;
          padding-left: 0;
          list-style: none; /* Remove default markers */

          li {
            display: flex;
            gap: 0.75rem;

            &::before {
              content: '•';
              font-size: 2.25rem;
              line-height: 1;
              display: grid;
              height: 1rem;
              place-content: center;
              position: relative;
              top: 3px;
            }
          }
        }
      }

      .most-popular {
        background-color: #0aa8a0;
        position: absolute;
        right: 0;
        top: -2.25rem;
        padding: 0.5rem;
        border-radius: 0.25rem;
        text-transform: uppercase;
      }

      @media screen and (min-width: 1024px) {
        min-height: unset;

        &:hover {
          transform: scale(1.05) translateZ(1rem); /* Scales up and moves card towards the viewer */
          box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.25);
          z-index: 2;
        }
      }
    }
  }

  .plans-footer-btn {
    padding: 0.5rem 1rem;
    border: 1px solid lightgray;
    border-radius: 0.5rem;
    min-width: 12rem;
    display: inline-grid;
    place-content: center;
    background-color: #d62125;
    color: white;
    font-weight: 600;
    transition: transform 200ms ease-in-out, box-shadow 200ms ease-in-out;
    font-style: italic;

    &:hover {
      color: white !important;
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }
  }
}