width: 624px;
    height: 750px;
    box-shadow: 0 0 18px 0 #404040;
    margin: 195px auto 0;
    transform: rotate(7deg)
}

.sm-history__img img {
    width: 556px;
    height: 556px;
    margin-top: 30px;
    margin-left: 35px
}

.sm-history__img:before {
    position: absolute;
    content: "";
    background: url(../img/history-decor.webp);
    background-size: 100% auto;
    width: 824px;
    height: 150px;
    top: -115px;
    left: -100px;
    transform: rotate(-7deg)
}

@media (max-width: 768px) {
    .sm-history__img {
        width: 224px;
        height: 272px;
        margin: 70px 30px 0 77px;
        box-shadow: 0 3px 7px 0 #919191
    }

    .sm-history__img img {
        width: 200px;
        height: 200px;
        margin-top: 12px;
        margin-left: 12px
    }

    .sm-history__img:before {
        background: url(../img/history-decor-1.webp);
        background-size: 100% auto;
        width: 315px;
        height: 85px;
        top: -49px;
        left: -43px
    }
}

.sm-history__decor {
    position: absolute;
    top: 44%;
    left: -20%;
    transform: translate(-50%, -100%) rotate(-13deg);
    font-size: 42px;
    font-family: var(--title-font-family);
    letter-spacing: -.03em;
    max-width: 200px
}

.sm-history__decor-arr {
    position: absolute;
    top: 42%;
    left: -25%
}

@media (max-width: 768px) {
    .sm-history__decor {
        top: 55%;
        left: -22%;
        transform: translate(-50%, -100%) rotate(-19deg);
        font-size: 18px;
        max-width: 85px
    }

    .sm-history__decor-arr {
        width: 40px;
        top: 45%;
        left: -25%;
        transform: rotate(-20deg)
    }
}

/* Mid-range "Это мы" section: fluid scaling between mobile (768) and
   desktop (>=1536) so the polaroid + handwritten annotation fit naturally. */
@media (min-width: 769px) and (max-width: 1535px) {
    .sm-history__img {
        width: clamp(224px, 32.5vw, 624px);
        height: clamp(272px, 39vw, 750px);
        margin: clamp(70px, 10vw, 195px) auto 0
    }

    .sm-history__img img {
        width: clamp(200px, 29vw, 556px);
        height: clamp(200px, 29vw, 556px);
        margin-top: clamp(12px, 1.55vw, 30px);
        margin-left: clamp(12px, 1.85vw, 35px)
    }

    .sm-history__img:before {
        width: clamp(315px, 43vw, 824px);
        height: clamp(85px, 7.8vw, 150px);
        top: clamp(-115px, -6vw, -49px);
        left: clamp(-100px, -5.2vw, -43px)
    }

    .sm-history__decor {
        font-size: clamp(18px, 2.2vw, 42px);
        max-width: clamp(85px, 10.4vw, 200px)
    }

    .sm-history__decor-arr {
        width: clamp(40px, 4.6vw, 88px);
        height: auto
    }
}

.sm-datetime {
    padding: 105px 0 120px
}

@media (max-width: 768px) {
    .sm-datetime {
        padding: 45px 0 50px
    }
}

.sm-datetime .sm-container {
    display: block
}

.sm-datetime .sm-text {
    max-width: 700px;
    margin: 60px auto 0;
    position: relative
}

span.sm-calendar__month-text-1:nth-child(3) {
    font-size: 106px
}

.sm-datetime .sm-title {
    color: #f21430;
    max-width: 970px;
    margin: 0 auto
}

.sm-calendar__month-text {
    font-size: 88px;
    letter-spacing: -.02em;
    font-family: var(--title-font-family);
    color: #6389ea;
    text-transform: uppercase;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center
}

.sm-calendar__month-text-2 {
    font-size: 180px;
    font-family: var(--title-font-family);
    color: #fe5900;
    margin: 0 80px
}

@media (max-width: 768px) {
    .sm-calendar__month-text {
        font-size: clamp(26px, 8vw, 32px);
        padding: 0 12px
    }

    .sm-calendar__month-text-2 {
        font-size: clamp(48px, 17vw, 64px);
        margin: 0 clamp(12px, 5vw, 30px)
    }

    span.sm-calendar__month-text-1:nth-child(3) {
        font-size: clamp(30px, 10vw, 40px)
    }
}

.sm-datetime__decor-arr {
    position: absolute;
    right: 18%;
    bottom: -25px
}

.sm-datetime__decor {
    position: absolute;
    top: auto;
    left: 77%;
    transform: translate(-50%, -100%) rotate(-9deg);
    bottom: -114px;
    font-size: var(--text-font-size);
    font-family: var(--title-font-family);
    width: 50%;
    text-align: center
}

.sm-datetime .sm-text:after, .sm-datetime .sm-title:before {
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    background: url(../img/decor/decor-heart.webp);
    background-size: contain;
    background-repeat: no-repeat;
    top: 25px;
    left: 0;
    transform: rotate(-22deg)
}

.sm-datetime .sm-text:after {
    top: 56px;
    left: 140%;
    transform: rotate(25deg)
}

@media (max-width: 768px) {
    .sm-datetime .sm-text {
        width: 70%;
        margin: 40px auto 0
    }

    .sm-datetime .sm-title:before {
        width: 10px;
        height: 10px;
        top: -12px;
        left: 40px
    }

    .sm-datetime .sm-text:after {
        top: -20px;
        left: 115%;
        width: 10px;
        height: 10px
    }

    .sm-datetime__decor-arr {
        right: 14%;
        bottom: 15px;
        width: 34px;
        height: 34px
    }

    .sm-datetime__decor {
        left: 77%;
        bottom: 20px;
        font-size: 16px;
        width: 35%;
        transform: translate(-50%, 100%) rotate(-9deg);
        text-align: center
    }
}

.sm-calendar__box {
    padding: 30px 8px 24px
}

@media (max-width: 768px) {
    .sm-calendar__box {
        padding: 40px 20px 24px
    }
}

.sm-date__calendar__month {
    font-family: var(--title-font-family);
    font-weight: var(--title-font-weight);
    line-height: var(--title-line-height);
    font-size: 80px;
    text-align: center
}

.sm-calendar {
    display: grid;
    grid-template-areas:"days days days days days days days""days days days days days days days""days days days days days days days""days days days days days days days""days days days days days days days""days days days days days days days";
    grid-template-columns:auto auto auto auto auto auto auto;
    grid-template-rows:auto auto auto auto auto auto auto;
    place-items: center;
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    column-gap: 30px;
    row-gap: 20px;
    width: 712px;
    margin: 20px auto 0
}

.sm-calendar-day, .sm-calendar-day-week-title {
    font-size: 48px;
    font-weight: var(--text-font-weight);
    line-height: 56px;
    text-align: center
}

.sm-calendar-day-week-title {
    font-family: var(--title-font-family);
    color: #444;
    text-transform: lowercase;
    width: 52px;
    height: 70px;
    opacity: .6
}

.sm-calendar-day {
    font-family: var(--text-font-family);
    color: var(--text-clr-1);
    text-transform: uppercase
}

@media (max-width: 768px) {
    .sm-calendar {
        width: 283px;
        column-gap: 0;
        margin-top: 0;
        row-gap: 35px
    }

    .sm-calendar-day, .sm-calendar-day-week-title {
        font-size: 18px;
        line-height: 20px
    }

    .sm-calendar-day-week-title {
        width: 40px;
        height: 20px
    }
}

.sm-number-active {
    position: relative;
    z-index: 3
}

.sm-number-active:before {
    content: "";
    width: 83px;
    height: 73px;
    display: block;
    mask: var(--date-active);
    -webkit-mask: var(--date-active);
    mask-size: 100% auto;
    -webkit-mask-size: 100% auto;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    background: #f21430
}

@media (max-width: 768px) {
    .sm-number-active:before {
        width: 42px;
        height: 40px
    }
}

/* Mid-range fluid scaling for calendar + datetime decor + heart sprites.
   Without this the desktop sizes (88/180/48 etc.) overflow viewports
   between 769 and 1535. */
@media (min-width: 769px) and (max-width: 1535px) {
    .sm-calendar__month-text {
        font-size: clamp(32px, 5.7vw, 88px)
    }

    .sm-calendar__month-text-2 {
        font-size: clamp(64px, 11.7vw, 180px);
        margin: 0 clamp(30px, 5.2vw, 80px)
    }

    span.sm-calendar__month-text-1:nth-child(3) {
        font-size: clamp(40px, 5.7vw, 88px)
    }

    .sm-calendar {
        width: clamp(283px, 46.4vw, 712px);
        column-gap: clamp(0px, 1.95vw, 30px);
        row-gap: clamp(20px, 1.3vw, 35px)
    }

    .sm-calendar-day, .sm-calendar-day-week-title {
        font-size: clamp(18px, 3.13vw, 48px);
        line-height: clamp(20px, 3.65vw, 56px)
    }

    .sm-calendar-day-week-title {
        width: clamp(40px, 3.4vw, 52px);
        height: clamp(20px, 4.55vw, 70px)
    }

    .sm-number-active:before {
        width: clamp(42px, 5.4vw, 83px);
        height: clamp(40px, 4.75vw, 73px)
    }

    /* Heart pseudo-element decorations (used on .sm-datetime, .sm-location,
       .sm-timing, .sm-contact etc.) — scale them fluidly so the proportion
       stays consistent across viewports. Mobile is 10–12px, desktop 30px. */
    .sm-datetime .sm-text:after,
    .sm-datetime .sm-title:before,
    .sm-location .sm-title:before,
    .sm-location__image:after,
    .sm-location__image:before,
    .sm-timing__item__img:before,
    .sm-contact .sm-title:after,
    .sm-contact .sm-title:before,
    .sm-contact .sm-text:after {
        width: clamp(12px, 1.95vw, 30px);
        height: clamp(12px, 1.95vw, 30px)
    }

    .sm-datetime__decor-arr {
        width: clamp(34px, 4.5vw, 86px);
        height: auto
    }

    .sm-datetime__decor {
        font-size: clamp(16px, 2.2vw, 42px)
    }
}

.sm-calendar__date, .sm-calendar__month {
    font-family: var(--title-font-family);
    font-weight: var(--title-font-weight);
    font-size: 36px;
    line-height: var(--title-line-height);
    text-align: center
}

.sm-calendar__date {
    font-size: 32px;
    line-height: var(--text-line-height)
}

@media (max-width: 768px) {
    .sm-calendar__date {
        font-size: 36px
    }
}

.sm-location {
    padding: 60px 0 20px
}

@media (max-width: 768px) {
    .sm-location {
        padding: 40px 0 10px;
        z-index: 11
    }
}

.sm-location .sm-text {
    width: 80%;
    max-width: 505px;
    margin: 30px auto 0;
    padding: 16px 0
}

.sm-location .sm-title {
    width: fit-content;
    margin: 0 auto;
    text-align: center;
    color: #f21530;
    position: relative
}

@media (max-width: 768px) {
    .sm-location .sm-text {
        width: 50%;
        margin: 10px auto 0
    }

    .sm-location .sm-title {
        max-width: 292px;
        margin: 0 auto
    }

    .sm-location .sm-container-flex {
        flex-direction: column-reverse;
        gap: 72px
    }
}

.sm-location__image {
    position: relative;
    width: 624px;
    height: 750px;
    margin: 70px auto 140px
}

@media (max-width: 768px) {
    .sm-location__image {
        width: 224px;
        height: 272px;
        margin: 25px auto 20px
    }
}

.sm-location__image img {
    width: 555px;
    height: 555px;
    margin-left: 34px;
    margin-top: 30px
}

@media (max-width: 768px) {
    .sm-location__image img {
        width: 200px;
        height: 200px;
        max-width: none;
        margin: 12px
    }
}

.sm-location .sm-img {
    width: 100%;
    height: 100%
}

.sm-location .sm-section__text {
    max-width: none;
    margin: 0 auto
}

.sm-location .sm-btn {
    margin-top: 70px
}

@media (max-width: 768px) {
    .sm-location .sm-btn {
        margin-top: 30px
    }
}

.sm-location__decor {
    position: absolute;
    font-size: 42px;
    left: 25%;
    margin-top: -62px;
    font-family: var(--title-font-family);
    transform: translateX(-50%) rotate(-9deg);
    bottom: 100px
}

.sm-location__decor-arr {
    position: absolute;
    left: 26%;
    bottom: 40px
}

@media (max-width: 768px) {
    .sm-location__decor {
        font-size: 16px;
        left: 18%;
        margin-top: 5px;
        max-width: 130px;
        text-align: center;
        transform: translate(-50%, -100%) rotate(-9deg);
        bottom: 15px
    }

    .sm-location__decor-arr {
        left: 20%;
        width: 14px;
        height: 30px;
        bottom: 10px
    }
}

/* Mid-range location section: fluid scaling for the polaroid + handwritten
   annotation between mobile (768) and desktop (1536+). */
@media (min-width: 769px) and (max-width: 1535px) {
    .sm-location__image {
        width: clamp(224px, 32.5vw, 624px);
        height: clamp(272px, 39vw, 750px);
        margin: clamp(25px, 3.65vw, 70px) auto clamp(20px, 7.3vw, 140px)
    }

    .sm-location__image img {
        width: clamp(200px, 28.9vw, 555px);
        height: clamp(200px, 28.9vw, 555px);
        margin-left: clamp(12px, 1.77vw, 34px);
        margin-top: clamp(12px, 1.55vw, 30px)
    }

    .sm-location__decor {
        font-size: clamp(16px, 2.2vw, 42px);
        max-width: clamp(130px, 15vw, 300px)
    }

    .sm-location__decor-arr {
        width: clamp(14px, 1.8vw, 34px);
        height: auto
    }

    .sm-location .sm-btn {
        margin-top: clamp(30px, 3.65vw, 70px)
    }
}

.sm-location .sm-title:before, .sm-location__image:after, .sm-location__image:before {
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    background: url(../img/decor/decor-heart.webp);
    background-size: contain;
    background-repeat: no-repeat;
    top: 0;
    left: 105%;
    transform: rotate(25deg)
}

.sm-location__image:after, .sm-location__image:before {
    top: 170px;
    left: -25%;
    transform: rotate(-25deg)
}

.sm-location__image:after {
    top: 40px;
    left: 120%;
    transform: rotate(25deg)
}

@media (max-width: 768px) {
    .sm-location .sm-title:before {
        background: url(../img/location-decor-1.webp);
        background-size: 100% auto;
        width: 250px;
        height: 89px;
        left: -75px;
        top: -42px;
        transform: rotate(0deg)
    }

    .sm-location__image:after, .sm-location__image:before {
        display: none
    }
}

.sm-timing {
    position: relative;
    padding: 75px 0
}

@media (max-width: 768px) {
    .sm-timing {
        padding: 35px 0
    }
}

.sm-timing .sm-title {
    color: #f21530
}

.sm-timing__item {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 25px
}

.sm-timing__item:not(:first-child) {
    margin-top: 25px
}

.sm-timing__item__text {
    font-family: var(--title-font-family);
    font-size: 72px;
    font-weight: 300;
    line-height: 80px;
    text-align: center;
    text-transform: none;
    letter-spacing: -.03em;
    /* Inline flow — each row "TIME · LABEL" is content-sized and centers
       as a unit; rows don't share column alignment. */
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto
}

.sm-timing__item__text > p {
    display: inline
}

.sm-timing__item__text > p:first-child {
    font-weight: 400
}

.sm-timing__item__text span {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: var(--text-clr-1);
    margin: 0 30px;
    /* Sit as a middle-dot between the text. vertical-align: middle lines up
       with the x-height of the surrounding text. */
    vertical-align: middle
}

.sm-timing__item__img {
    width: fit-content;
    margin: 0 auto;
    position: relative
}

.sm-timing__item__img svg {
    max-height: 206px;
    max-width: 206px
}

@media (max-width: 768px) {
    .sm-timing__item__img svg {
        max-height: 56px;
        max-width: 56px
    }

    .sm-timing__item__text {
        font-size: clamp(14px, 4.7vw, 20px);
        line-height: 20px
    }

    .sm-timing__item {
        gap: 12px
    }

    .sm-timing__item__text > p:first-child {
        white-space: nowrap
    }

    .sm-timing__item__text span {
        width: 4px;
        height: 4px;
        margin: 0
    }

    .sm-timing__item:not(:first-child) {
        margin-top: 7px
    }
}

.sm-timing__decor {
    position: absolute;
    font-size: 42px;
    line-height: 48px;
    width: 365px;
    text-align: center;
    left: 68%;
    top: 10%;
    transform: rotate(18deg) translateY(-100%);
    font-family: var(--title-font-family);
    letter-spacing: -.03em
}

.sm-timing__decor-arr {
    position: absolute;
    left: 81%;
    top: 9%
}

@media (max-width: 768px) {
    .sm-timing__decor {
        font-size: 18px;
        line-height: 22px;
        left: auto;
        right: 14px;
        top: 60px;
        transform: rotate(8deg);
        width: 150px
    }

    .sm-timing__decor-arr {
        left: auto;
        right: 76px;
        top: 110px;
        width: 32px;
        height: 32px
    }
}

/* Mid-range timing: fluid scaling for icons, event labels, decor & arrow.
   Placed AFTER the desktop defaults so the cascade applies these on
   viewports between 769 and 1535. */
@media (min-width: 769px) and (max-width: 1535px) {
    .sm-timing__item__img svg {
        max-height: clamp(56px, 10.7vw, 206px);
        max-width: clamp(56px, 10.7vw, 206px)
    }

    .sm-timing__item__text {
        font-size: clamp(20px, 3.75vw, 72px);
        line-height: clamp(20px, 4.2vw, 80px)
    }

    .sm-timing__item {
        gap: clamp(12px, 1.5vw, 25px)
    }

    .sm-timing__item:not(:first-child) {
        margin-top: clamp(12px, 1.5vw, 25px)
    }

    .sm-timing__item__text span {
        width: clamp(4px, 0.73vw, 14px);
        height: clamp(4px, 0.73vw, 14px);
        margin: 0 clamp(0px, 1.55vw, 30px)
    }

    .sm-timing__decor {
        font-size: clamp(16px, 2.2vw, 42px);
        line-height: clamp(16px, 2.5vw, 48px);
        width: clamp(125px, 19vw, 365px);
        left: 64%;
        top: clamp(70px, 8vw, 130px);
        transform: rotate(15deg) translateY(-100%)
    }

    .sm-timing__decor-arr {
        width: clamp(36px, 4.6vw, 88px);
        height: auto;
        left: 76%;
        top: clamp(70px, 8vw, 130px)
    }
}

.sm-timing__item__img:before {
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    background: url(../img/decor/decor-heart.webp);
    background-size: contain;
    background-repeat: no-repeat
}

.sm-timing__item__img-1 .sm-timing__item__img:before {
    top: 30px;
    left: -175%;
    transform: rotate(-12deg)
}

.sm-timing__item__img-2 .sm-timing__item__img:before {
    top: -30px;
    left: 320%;
    transform: rotate(21deg)
}

.sm-timing__item__img-3 .sm-timing__item__img:before {
    top: 5px;
    left: -230%;
    transform: rotate(20deg)
}

.sm-timing__item__img-4 .sm-timing__item__img:before {
    top: -20px;
    left: 275%;
    transform: rotate(-20deg)
}

.sm-timing__item__img-5 .sm-timing__item__img:before {
    /* Bus SVG already has integrated heart decor — suppress the external one. */
    display: none
}

@media (max-width: 768px) {
    .sm-timing__item__img:before {
        width: 12px;
        height: 12px
    }

    .sm-timing__item__img-1 .sm-timing__item__img:before {
        top: 30px;
        left: -260%;
        transform: rotate(-12deg)
    }

    .sm-timing__item__img-2 .sm-timing__item__img:before {
        top: 35px;
        left: 312%;
        transform: rotate(21deg)
    }

    .sm-timing__item__img-3 .sm-timing__item__img:before {
        top: 115px;
        left: -256%;
        transform: rotate(-15deg)
    }

    .sm-timing__item__img-4 .sm-timing__item__img:before {
        top: 92px;
        left: 343%;
        transform: rotate(20deg)
    }

    .sm-timing__item__img-5 .sm-timing__item__img:before {
        display: none
    }
}