diff --git a/src/pages/subscribe/index.scss b/src/pages/subscribe/index.scss index 185d09a..ac66786 100644 --- a/src/pages/subscribe/index.scss +++ b/src/pages/subscribe/index.scss @@ -499,3 +499,102 @@ } } } + +@media (max-width: 480px) { + .subscribe-page { + .subscribe-page__content { + padding-right: 14px; + padding-left: 14px; + } + + .subscribe-overview { + .subscribe-overview__title { + height: auto; + line-height: 24px; + } + + .subscribe-overview__subtitle { + min-height: 0; + } + } + + .subscribe-overview-card { + padding: 18px 16px; + border-radius: 20px; + + .subscribe-overview-card__divider { + top: 48px; + right: 16px; + left: 16px; + } + + .user-plan { + gap: 8px; + } + + .points-grid { + grid-template-columns: 1fr; + gap: 10px; + } + + .points-item { + min-height: 0; + padding-left: 12px; + } + + .points-item__label, + .points-item__value { + width: 100%; + } + + .buy-points-btn { + width: 100%; + height: 32px; + } + } + + .subscribe-promo-carousel { + height: 148px; + border-radius: 20px; + + .subscribe-promo-carousel__swiper, + .subscribe-promo-carousel__slide { + border-radius: 20px; + } + } + + .subscribe-promo-card { + padding: 24px 18px; + border-radius: 20px; + + .subscribe-promo-card__media, + .subscribe-promo-card__shade { + border-radius: 20px; + } + + .subscribe-promo-card__title { + font-size: 24px; + } + + .subscribe-promo-card__text { + white-space: normal; + } + } + + .subscribe-promo-card.subscribe-promo-card_membership { + .subscribe-promo-card__image { + right: -240px; + } + } + + .subscribe-promo-card.subscribe-promo-card_artist { + .subscribe-promo-card__content { + width: 220px; + } + + .subscribe-promo-card__image { + right: -210px; + } + } + } +}