.content-wrapper {
  margin-top: var(--navbar-height);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100px 0;
  gap: 100px;

  & .store-text {
    text-align: center;
    padding: 0 15px;

    & .store-heading {
      color: var(--color-primary);
      margin: 0;
      font-size: 54px;

      @media (width < 600px) {
        font-size: 48px;
        line-height: 58px;
      }
    }

    & p {
      color: white;
      margin: 10px 0 0;
      font-size: 24px;

      @media (width < 600px) {
        font-size: 20px;
      }
    }
  }

  & .plans {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;

    @media (width < 1300px) {
      flex-direction: column;
    }

    & .focal-plan-card-wrapper {
      position: relative;
      &::after {
        content: "";
        inset: 0;
        position: absolute;
        top: 0;
        left: 0;
        inset: -1px;
        z-index: -1;
        border-radius: 20px;
        background-image: linear-gradient(
          to bottom,
          var(--color-primary) 60%,
          transparent
        );
      }
    }

    & .plan-card {
      display: flex;
      flex-direction: column;
      gap: 20px;
      width: min(380px, 95vw);
      background-image: linear-gradient(
        to bottom,
        var(--color-background-secondary) 50%,
        var(--color-background)
      );
      border-radius: 20px;
      padding: 30px;
      box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.3);
      overflow: hidden;
      position: relative;

      &.focal {
        background-color: var(--color-background-secondary);
        background-image: none;

        & .plan-select-btn {
          background-color: var(--color-primary);
        }

        .top-blur {
          width: 0;
          height: 0;
          position: absolute;
          top: 0;
          left: 50%;
          box-shadow: 0 0 100px 40px var(--color-primary);
          transition: transform 0.1s ease;
        }
      }

      & .plan-info {
        & .plan-title {
          color: var(--color-primary);
          margin: 0;
          font-size: 24px;
        }

        & .plan-price {
          color: white;
          font-size: 48px;
          font-weight: 700;
          margin: 2px 0 0;

          & .discount-original {
            color: var(--color-text-secondary);
            font-size: 28px;
            font-weight: 500;
            text-decoration: line-through;
          }
        }
      }

      & .plan-select-btn {
        outline: none;
        border: none;
        background-color: #242424;
        color: white;
        font-size: 22px;
        padding: 10px 0;
        width: 100%;
        border-radius: 1000px;
        cursor: pointer;
        text-decoration: none;
        text-align: center;
        transition: transform 0.1s ease-in-out;

        &:hover {
          transform: scale(1.01);
        }
      }

      & .plan-perks {
        list-style: none;
        margin: 0;
        padding: 0;

        & li {
          font-size: 22px;
          display: flex;
          align-items: center;
          gap: 10px;
          color: var(--color-text-secondary);

          & .tick-icon {
            color: var(--color-primary);
          }
        }
      }
    }
  }
}