.membership-accordion-container {
  .membership-accordion {
    background-color: unset;
    color: var(--primary-black);
    clip-path: none;

    &::after {
      height: 0;
      clip-path: none;
    }
  }

  .membership-list {
    .membership-accordion__item {
      background: var(--secondary-gray-20);

      .membership-accordion__inclusions {
        p,
        p:last-child {
          color: var(--primary-black);
          font-size: var(--heading-font-20-mob-text);
          line-height: var(--heading-lh-19-mob-display);

          @media (width >= 1024px) {
            font-size: var(--heading-font-22-des);
            line-height: var(--heading-lh-6-des);
          }
        }

        p {
          font-weight: var(--fw-400);
        }

        p:last-child {
          font-weight: var(--fw-600);
        }
      }

      .membership-accordion__metrics {
        .metric {
          .metric-value {
            color: var(--primary-black);
            font-size: var(--heading-font-20-mob-text);
            line-height: var(--heading-lh-19-mob-display);
            font-weight: var(--fw-500);

            @media (width >= 1024px) {
              font-size: var(--heading-font-7-des);
              line-height: var(--heading-lh-21-des-text-small);
            }
          }

          .metric-label {
            font-weight: var(--fw-300);

            @media (width >= 1024px) {
              font-size: var(--heading-font-22-des);
              line-height: var(--heading-lh-6-des);
            }
          }
        }
      }

      .membership-accordion__name {
        font-size: var(--heading-font-4-mob);
        line-height: var(--heading-lh-19-mob-text-small);
        font-weight: var(--fw-600);
      }

      .membership-accordion__icon {
        background-image: url(/icons/add.svg);
      }

      &.open {
        .membership-accordion__icon {
          background-image: url(/icons/minus-black.svg);
        }
      }
    }
  }

  .membership-button {
    .button {
      clip-path: none;
      padding: 8px 16px;
      background-color: var(--primary-blue-700);
      color: var(--secondary-white);
      font-size: var(--heading-font-20-mob-text);
      line-height: var(--heading-lh-4--mob-text-medium);

      &:hover {
        background-color: var(--primary-blue-900);
      }

      @media (width >= 1024px) {
        padding: 12px 24px;
      }
    }
  }

  .membership-title {
    :is(h1, h2, h3, h4, h5, h6, p) {
      font-size: var(--heading-font-15-mob-sub-heading);
      line-height: var(--heading-lh-19-mob-text-small);
      font-weight: var(--fw-700);

      @media (width >= 1024px) {
        font-size: var(--heading-font-1-des);
        line-height: var(--heading-lh-16-des-display);
        font-weight: var(--fw-600);
      }
    }
  }

  .membership-accordion {
    padding-block: calc(var(--nav-height) + var(--space-20px) + var(--space-3px)) 0;
  }

  .membership-title {
    :is(h1,h2,h3,h4,h5,h6,p) {
      margin-bottom: var(--heading-lh-10-des);
    }
    @media (width >= 1024px) {
      :is(h1,h2,h3,h4,h5,h6,p) {
        margin-bottom: calc(var(--space-32px) + var(--space-12px));
      }
    }
  }

  .membership-button {
    position: absolute;
    top: calc(var(--nav-height) + var(--space-20px) + var(--space-3px));
    right: var(--container-margin);
    margin: 0;

    @media (width >= 768px) {
      top: calc(var(--nav-height) + var(--space-20px) + var(--space-3px));
    }

    @media (width >= 999px) {
      top: calc(var(--nav-height) + var(--space-24px) + var(--space-3px));
    }
  }

  .membership-list {
    .membership-accordion__item {
      overflow: hidden;

      .color-strip {
        width: 150%;
        height: var(--space-4px);
        
        @media (width >= 1024px) {
          width: var(--space-4px);
          height: auto;
        }
      }

      .membership-accordion__content {
        gap: var(--space-16px);
        margin-right: var(--space-40px);
        height: fit-content;

        @media (width >= 999px) {
          margin-right: var(--space-48px);
        }
      }

      .membership-accordion__metrics {
        gap: var(--space-16px);
        display: grid;
        grid-template-columns: 1fr 1fr;

        @media (width >= 768px) {
          display: flex;
          grid-template-columns: unset;
        }

        .metric {
          @media (width > 1200px) {
            min-width: calc(var(--space-120px) + var(--space-7px));
          }
        }
      }

      .membership-accordion__details {
        p {
          margin-top: 0;
          margin-bottom: var(--space-16px);

          @media (width = 768px) {
            margin-bottom: var(--heading-lh-7-des-display);
          }
        }
      }

      .membership-accordion__icon {
        background: url(/icons/add-blue.svg) no-repeat center;
      }

      &.open {

        .membership-accordion__metrics {
          margin: 0 0 var(--space-18px);

          @media (width >= 768px) {
            margin-bottom: 0;
          }
        }

        .membership-accordion__content {
          margin-bottom: var(--space-16px);
        }

        .membership-accordion__icon {
          background: url(/icons/minus-blue.svg) no-repeat center;
        }
      }

      .membership-accordion__name {
        margin-bottom: var(--space-8px);
      }

      .membership-accordion__inclusions {
        margin-bottom: var(--space-16px);
      }
    }
  }
}