/* our memberships section */
.section__memberships {
  margin: 2rem 0 5rem;

  .memberships-area {
    display: grid;
    grid-template-areas: "standard" "premium" "contact";
    gap: 3rem;

    @media (width >= 700px) {
      grid-template-areas: "standard premium" "contact contact";
    }

    @media (width >= 992px) {
      grid-template-areas: "standard premium contact";
    }

    #standard-membership {
      grid-area: standard;
    }

    #premium-membership {
      grid-area: premium;
    }

    hr {
      opacity: 0.1;
    }

    .membership-option {
      border-radius: 20px;
      background-color: var(--white-color);
      display: grid;
      grid-template-rows: 1fr auto;

      .info-box {
        transition:
          padding 0.3s ease,
          box-shadow 0.3s ease;
        padding: 2rem;
      }

      &:hover .info-box {
        padding-bottom: 4rem;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
      }

      .membership-information {
        padding: 2rem;

        .weight-icon {
          &:before {
            content: "\f44b";
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: var(--font-fa);
            font-weight: 400;
            font-size: 1.1em;
            color: var(--dark-color);
            background-color: var(--theme-color);
            border-radius: 100%;
            height: 40px;
            width: 40px;
          }
        }
      }

      .info-box {
        padding: 2rem;
        border-radius: 20px;
        background-color: var(--dark-color);
        display: grid;
        align-items: start;
        row-gap: 1rem;
        grid-template-areas: "price price" "cta cta" "hr hr" "info info";

        @media (width >= 1400px) {
          grid-template-areas: "price cta" "hr hr" "info info";
        }

        .price {
          grid-area: price;
          color: var(--white-color);
          font-weight: 800;
          font-family: var(--font-heading);
          font-size: 2rem;

          span {
            font-size: 0.25em;
            font-weight: 400;
          }

          .note {
            font-weight: 400;
            font-family: var(--font-default);
            font-size: 0.9rem;
          }
        }

        .cta {
          grid-area: cta;
        }

        hr {
          grid-area: hr;
          margin: 0;
        }

        .additional-information {
          color: var(--white-color);
          grid-area: info;
          font-size: 0.8em;
        }
      }
    }

    .membership-contact-info {
      grid-area: contact;
      text-align: center;
      padding: 2rem 0 0;
      border-radius: 20px;
      background-color: var(--dark-color);

      h3 {
        color: var(--white-color);
      }

      .call-us {
        color: var(--white-color);
        font-size: 20px;
        font-weight: 800;
        font-family: var(--font-heading);
      }

      .contact-info {
        padding: 0 2rem;
        color: var(--white-color);
        margin-bottom: 2rem;
      }

      .contact-info-image {
        margin-top: 3rem;
        display: none;

        @media (width >= 992px) {
          display: flex;
          justify-content: flex-end;
        }
      }
    }
  }

  .membership-features {
    margin: 2rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6rem;

    .membership-feature {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.8rem;

      &::before {
        font-family: var(--font-fa);
        font-weight: 400;
        font-size: 1.1rem;
        color: var(--theme-color);
      }
    }

    .schedule-check {
      &::before {
        content: "\f274";
        font-weight: 400;
      }
    }

    .credit-card {
      &::before {
        content: "\f09d";
        font-weight: 400;
      }
    }

    .clock {
      &::before {
        content: "\f017";
        font-weight: 400;
      }
    }
  }
}