html, body {
    width: 100%;
    height: 100%;
    font-family: 'YS Text', sans-serif;

    background-color: #2A2928;
}

html {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;     /* Firefox */
    overflow-y: scroll;        /* Optional: ensures content is scrollable */
}

.html::-webkit-scrollbar {
    display: none;
}

html {
    font-size: calc(1vw / 1.92);
}

* {
    box-sizing: border-box;
}

@media (max-width: 1440px) {
    html {
        font-size: calc(1vw / 1.44);
    }
}

@media (max-width: 1024px) {
    html {
        font-size: calc(1vw / 1.024);
    }
}

@media (max-width: 768px) {
    html {
        font-size: calc(1vw / 0.375);
    }
}

.__hidden {
    position: absolute;
    top: -9999px;
    left: -9999px;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 768px) {
    .mob-hide {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .mob-show {
        display: none !important;
    }
}

.yBodyOverflowHidden {
    overflow: visible !important;
}

/* HERO */
.section__hero-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.section__hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section__hero-player {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13.9rem;

    padding: 2.7rem 3rem;
    background-color: #1D1D1D;
    border: .2rem solid #E9453A;


    margin-top: 2rem;
    padding: 2.2rem 2rem 2.2rem 3rem;
    left: 0.5rem;
    gap: 14.2rem;
}

.section__hero-player-text {
    font-family: YS Text;
    font-weight: 400;
    font-style: Regular;
    font-size: 2.685rem;
    line-height: 1.05;
    letter-spacing: -0.02em;

    color: #E9453A;
}

.section__hero-player-button {
    all: unset;

    display: flex;
    align-items: center;
    justify-content: center;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 10.6rem;
    height: auto;
    aspect-ratio: 1 / 1;

    background-color: #E9453A;
    border-radius: 50%;

    cursor: pointer;

    transition: background-color 0.3s ease;
}

.section__hero-player-button:hover {
    background-color: #FF453A;
}

.section__hero-player-button svg {
    width: 4.5rem;
    height: auto;
    object-fit: contain;
    transform: translateX(0.7rem);
}

.section__hero-player-button.is-playing svg {
    width: 3.7rem;
    transform: none;
}

.section__hero-logo {
    width: 74.8rem;
    margin: 0 auto;
    height: auto;
    object-fit: contain;

    position: relative;
    left: 50%;
    transform: translateX(-50%);

    margin-top: 8rem;
}

.section__subtitle {
    font-family: YS Text;
    font-weight: 300;
    font-style: Light;
    font-size: 3.4rem;
    line-height: 1.25;
    letter-spacing: 0.013em;
    text-align: center;

    color: #FFFFFF;

    margin-top: 2.3rem;
}

.section__hero-cta {
    all: unset;

    margin-top: 4.2rem;

    display: flex;
    align-items: center;
    justify-content: center;

    height: 7.6rem;
    width: 34.9rem;

    background-color: #E9453A;

    font-family: YS Text;
    font-weight: 400;
    font-style: Regular;
    font-size: 2.2rem;
    leading-trim: NONE;
    line-height: 2.401rem;
    letter-spacing: 0;
    text-align: center;

    color: #FFFFFF;

    cursor: pointer;

    transition: background-color 0.3s ease;
}

.section__hero-cta:hover {
    background-color: #FF453A;
}

@media (max-width: 1440px) {
    .section__hero-player-text {
        font-size: 2rem;
    }  

    .section__hero-player-button {
        width: 8rem;
    }

    .section__hero-player {
        margin-top: 1.4rem;
        padding: 1.4rem 1rem 1.8rem 1.6rem;
        left: 0.4rem;
        gap: 11.8rem;
    }

    .section__hero-player-button svg {
        width: 3.5rem;
        transform: translateX(0.5rem);
    }

    .section__hero-player-button.is-playing svg {
        width: 2.7rem;
    }

    .section__hero-logo {
        width: 56.3rem;
        margin-top: 6rem;
    }

    .section__subtitle {
        font-size: 2.5rem;
        line-height: 1.24;
        margin-top: 1.9rem;
    }

    .section__hero-cta {
        margin-top: 3.4rem;
        height: 5.7rem;
        width: 26.2rem;
        font-size: 1.6rem;
        line-height: 1.8rem;
    }
}

@media (max-width: 1024px) {
    .section__hero-player {
        margin-top: 0.9rem;
        padding: 1.1rem 1.1rem 1.1rem 1.4rem;
        left: 0.2rem;
        gap: 8.2rem;
    }

    .section__hero-player-text {
        font-size: 1.4rem;
    }

    .section__hero-player-button {
        width: 5.7rem;
    }

    .section__hero-player-button svg {
        width: 2.4rem;
        transform: translateX(0.4rem);
    }

    .section__hero-player-button.is-playing svg {
        width: 2.7rem;
    }

    .section__hero-player-button.is-playing svg {
        width: 1.7rem;
    }

    .section__hero-logo {
        width: 40rem;
        margin-top: 4.3rem;
    }

    .section__subtitle {
        font-size: 1.8rem;
        line-height: 1.24;
        margin-top: 1.4rem;
    }

    .section__hero-cta {
        margin-top: 2.2rem;
        height: 4rem;
        width: 18.6rem;
        font-size: 1.2rem;
        line-height: 1.4rem;
    }
}

@media (max-width: 768px) {
    .section__hero-image img {
        top: 0.8rem;
        position: relative;
    }

    .section__hero-container {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .section__hero-player {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
        justify-content: flex-start;
        margin: 3.8rem 2rem 0 2rem;
        width: calc(100% - 7rem);
        padding: 1.3rem 1.1rem 1.1rem 9rem;
        left: 3rem;
    }

    .section__hero-player-text {
        font-size: 2rem;
    }

    .section__hero-player-button {
        width: 8.5rem;
        transform: translateY(-50%);
        left: -3.2rem;
    }

    .section__hero-player-button svg {
        width: 3.6rem;
        transform: translateX(0.4rem);
    }

    .section__hero-player-button.is-playing svg {
        width: 2.9rem;
    }

    .section__hero-logo {
        width: 27.7rem;
        margin-top: 4.6rem;
    }

    .section__subtitle br {
        display: none;
    }

    .section__subtitle {
        font-size: 2rem;
        line-height: 1.2;
        margin-top: 3.4rem;
        padding: 0 3rem;
    }

    .section__hero-cta {
        margin-top: 3.5rem;
        height: 6.1rem;
        width: 33.5rem;
        font-size: 1.75rem;
        line-height: 1.4rem;
        align-self: center;
    }
}



/* ABOUT */
.section__about {
    padding-top: 16.5rem;
}

.section__about-logo {
    width: 60.5rem;
    margin: 0 auto;
    height: auto;
    object-fit: contain;

    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.section__about-features {
    margin-top: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6rem;
}

.section__about-features-item {
}

.section__about-features-item.item-1 img {
    width: 26.8rem;
}
.section__about-features-item.item-2 img {
    width: 27.7rem;
}

.section__about-text {
    font-family: "YS Text";
    font-weight: 300;
    font-style: Light;
    font-size: 2.5rem;
    leading-trim: NONE;
    line-height: 125%;
    letter-spacing: 0.01em;
    text-align: center;

    color: #F7F5E9;

    max-width: 88.9rem;
    margin: 0 auto;
    margin-top: 4.1rem;
}

@media (max-width: 1440px) {
    .section__about {
        padding-top: 12.2rem;
    }

    .section__about-logo {
        width: 45.5rem;
    }

    .section__about-features {
        margin-top: 1.7rem;
        gap: 3.3rem;
        left: -0.5rem;
        position: relative;
    }

    .section__about-features-item.item-1 img {
        width: 20.2rem;
    }

    .section__about-features-item.item-2 img {
        width: 20.8rem;
    }

    .section__about-text {
        font-size: 1.9rem;
        max-width: 68rem;
        margin-top: 2.6rem;
    }
}

@media (max-width: 1024px) {
    .section__about {
        padding-top: 8.8rem;
    }
    
    .section__about-logo {
        width: 32.3rem;
    }

    .section__about-features {
        margin-top: 1.2rem;
        gap: 3.1rem;
        left: -0.3rem;
        position: relative;
    }

    .section__about-features-item.item-1 img {
        width: 14.5rem;
    }

    .section__about-features-item.item-2 img {
        width: 14.7rem;
    }

    .section__about-text {
        font-size: 1.3rem;
        max-width: 46.9rem;
        margin-top: 1.7rem;
    }
}

@media (max-width: 768px) {
    .section__about {
        padding-top: 10.7rem;
    }   

    .section__about-logo {
        width: 32.2rem;
    }

    .section__about-features {
        margin-top: 2.5rem;
        gap: 3.1rem;
        left: 0;
        position: relative;
        flex-direction: column;
    }

    .section__about-features-item.item-1 img {
        width: 16.8rem;
    }

    .section__about-features-item.item-2 img {
        width: 17.4rem;
    }

    .section__about-text {
        font-size: 1.65rem;
        max-width: 32.7rem;
        margin-top: 3.4rem;
        line-height: 1.17;
    }
}


/* ACTIONS */
.section__actions {
    padding-top: 14.9rem;
}

.section__actions-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8.6rem;
}

.section__actions-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 103rem;
    height: auto;
    padding: 2.7rem 0 5.1rem 0;

    background-color: transparent;
    border: .2rem solid #F7F5E9;
}

.section__actions-item-label {
    font-family: YS Text;
    font-weight: 400;
    font-style: Regular;
    font-size: 2.2rem;
    leading-trim: CAP_HEIGHT;
    line-height: 105%;
    letter-spacing: 0%;
    text-align: center;
    text-transform: uppercase;
    font-variant-numeric-figure: lining-nums;
    font-variant-numeric-spacing: proportional-nums;
    color: #E9453A;
}

.section__actions-item.item-1 .section__actions-item-logo {
    width: 57.6rem;
    height: auto;
    object-fit: contain;
    margin-top: 1.8rem;
}

.section__actions-item.item-2 .section__actions-item-logo {
    width: 62.1rem;
    height: auto;
    object-fit: contain;
    margin-top: 2.1rem;
}

.section__actions-item-text {
    font-family: YS Text;
    font-weight: 300;
    font-style: Light;
    font-size: 2.5rem;
    leading-trim: NONE;
    line-height: 125%;
    letter-spacing: 1%;
    text-align: center;
    color: #F7F5E9;

    max-width: 67.5rem;
    margin: 0 auto;
    margin-top: 3.4rem;
}

.section__actions-item.item-2 .section__actions-item-text {
    max-width: 89.4rem;
}

.section__actions-item-car-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 4.5rem;
}

.section__actions-item-car {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.4rem;
}

.section__actions-item-car-title {
    font-family: YS Text;
    font-weight: 400;
    font-style: Regular;
    font-size: 2.223rem;
    leading-trim: CAP_HEIGHT;
    line-height: 105%;
    letter-spacing: 0%;
    text-align: center;
    text-transform: uppercase;
    font-variant-numeric-figure: lining-nums;
    font-variant-numeric-spacing: proportional-nums;
    color:#E9453A;
}

.section__actions-item-car-text {
    font-family: YS Text;
    font-weight: 300;
    font-style: Light;
    font-size: 1.7rem;
    leading-trim: NONE;
    line-height: 120%;
    letter-spacing: 1%;
    text-align: center;
    color: #FFFFFF;
}

.section__actions-item-car.item-1 {
    margin-right: 7.8rem;
}
.section__actions-item-car.item-3 {
    margin-left: 8.1rem;
}

.section__actions-item-buttons-container {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 2.2rem;
    row-gap: 1.9rem;
    margin-top: 5.1rem;
    flex-wrap: wrap;
}

.section__actions-item-button {
    all: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34.9rem;
    height: 7.6rem;
    background-color: #1D1D1D;
    border: .2rem solid #F7F5E9;

    font-family: YS Text;
    font-weight: 400;
    font-style: Regular;
    font-size: 2.2rem;
    leading-trim: NONE;
    line-height: 2.401rem;
    letter-spacing: 0%;
    text-align: center;
    vertical-align: middle;
    color: #F7F5E9;

    cursor: pointer;
    transition: background-color 0.3s ease;
}

.section__actions-item-button:hover {
    background-color: #222222;
    color: #FFFFFF;
}

.section__actions-item-button.light {
    background-color: #FFEBA3;
    color: #1D1D1D;
    border: none;
}

.section__actions-item-button.light:hover {
    background-color: #fae596;
    color: #1D1D1D;
}

@media (max-width: 1440px) {
    .section__actions {
        padding-top: 11.4rem;
    }

    .section__actions-item {
        width: 77.4rem;
        padding: 1.9rem 0 3.7rem 0;
    }

    .section__actions-item-label {
        font-size: 1.7rem;
    }

    .section__actions-item.item-1 .section__actions-item-logo {
        width: 43.3rem;
        margin-top: 1.4rem;
    }

    .section__actions-item-text {
        font-size: 1.95rem;
        max-width: 51rem;
        margin-top: 2.6rem;
    }

    .section__actions-item-car-container {
        margin-top: 2.9rem;
    }

    .section__actions-item-car {
        gap: 1rem;
    }

    .section__actions-item-car.item-1 {
        margin-right: 5.8rem;
    }

    .section__actions-item-car.item-3 {
        margin-left: 6.5rem;
    }

    .section__actions-item-car-title {
        font-size: 1.7rem;
    }

    .section__actions-item-car-text {
        font-size: 1.3rem;
    }

    .section__actions-container {
        gap: 6.4rem;
    }

    .section__actions-item.item-2 .section__actions-item-logo {
        width: 46.7rem;
        margin-top: 1.2rem;
    }

    .section__actions-item.item-2 .section__actions-item-text {
        max-width: 67.4rem;
        margin-top: 3.1rem;
    }

    .section__actions-item-buttons-container {
        column-gap: 1.8rem;
        row-gap: 1.5rem;
        margin-top: 3.3rem;
    }

    .section__actions-item-button {
        width: 25.5rem;
        height: 5.3rem;
        font-size: 1.6rem;
    }


}

@media (max-width: 1024px) {
    .section__actions {
        padding-top: 8.5rem;
    }
    
    .section__actions-item {
        width: 55rem;
        padding: 1.4rem 0 2.4rem 0;
    }

    .section__actions-item-label {
        font-size: 1.2rem;
    }

    .section__actions-item.item-1 .section__actions-item-logo {
        width: 30.8rem;
        margin-top: 0.9rem;
    }

    .section__actions-item-text {
        font-size: 1.3rem;
        max-width: 36rem;
        margin-top: 1.8rem;
    }

    .section__actions-item-car-container {
        margin-top: 2.5rem;
    }

    .section__actions-item-car-title {
        font-size: 1.185rem;
    }

    .section__actions-item-car-text {
        font-size: 0.907rem;
    }

    .section__actions-item-car.item-1 {
        margin-right: 4.1rem;
    }

    .section__actions-item-car.item-3 {
        margin-left: 4.3rem;
    }

    .section__actions-item.item-2 .section__actions-item-logo {
        width: 33rem;
        margin-top: 1rem;
    }

    .section__actions-item.item-2 .section__actions-item-text {
        max-width: 46.4rem;
        margin-top: 2.1rem;
    }

    .section__actions-container {
        gap: 4.5rem;
    }

    .section__actions-item-buttons-container {
        column-gap: 1.2rem;
        row-gap: 1.1rem;
        margin-top: 2.7rem;
    }

    .section__actions-item-button {
        width: 18.2rem;
        height: 3.6rem;
        font-size: 1.15rem;
    }

    .section__actions-item.item-2 {
        padding-bottom: 3.6rem;
    }
}

@media (max-width: 768px) { 
    .section__actions {
        padding-top: 11.6rem;
    }

    .section__actions-item {
        width: 33.5rem;
        padding: 1.9rem 0 2.6rem 0;
    }

    .section__actions-item-label {
        font-size: 1.7rem;
    }

    .section__actions-item.item-1 .section__actions-item-logo {
        width: 28.1rem;
        margin-top: 1.5rem;
    }

    .section__actions-item-text {
        font-size: 1.7rem;
        max-width: 28.9rem;
        margin-top: 2.9rem;
        line-height: 1.175;
    }

    .section__actions-item-car-container {
        margin-top: 3.5rem;
        flex-wrap: wrap;
        row-gap: 2.9rem;
    }

    .section__actions-item-car {
        gap: 0.9rem;
    }

    .section__actions-item-car.item-1 {
        margin-right: 0 !important;
        width: 50%;
    }
    .section__actions-item-car.item-2 {
        margin-right: 0 !important;
        width: 50%;
    }
    .section__actions-item-car.item-3 {
        margin-left: 0 !important;
        width: 100%;
    }

    .section__actions-item-car-title {
        font-size: 1.7rem;
    }

    .section__actions-item-car-text {
        font-size: 1.4rem;
    }

    .section__actions-container {
        gap: 4.9rem;
    }

    .section__actions-item.item-2 .section__actions-item-logo {
        width: 25rem;
        margin-top: 1.5rem;
    }

    .section__actions-item.item-2 .section__actions-item-text {
        max-width: 30rem;
        margin-top: 3.4rem;
    }

    .section__actions-item-button {
        width: 28.5rem;
        height: 4.8rem;
        font-size: 1.45rem;
    }

    .section__actions-item-buttons-container {
        column-gap: 1.2rem;
        row-gap: 1.4rem;
        margin-top: 3.5rem;
    }

    .section__actions-item.item-2 {
        padding-bottom: 2.6rem;
    }
}


/* REGISTRATION */
.section__registration {
    padding-top: 12.7rem;
}

.section__registration-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.section__registration-text {
    font-family: YS Text;
    font-weight: 300;
    font-style: Light;
    font-size: 2.5rem;
    leading-trim: NONE;
    line-height: 125%;
    letter-spacing: 1%;
    text-align: center;
    max-width: 94.8rem;
    margin: 0 auto;
    margin-top: 3.5rem;
    color: #F7F5E9;
}

.section__registration-logo {
    width: 79.7rem;
    margin: 0 auto;
    height: auto;
    object-fit: contain;
}

.section__registration-buttons-container {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 2.2rem;
    margin-top: 4.8rem;
    flex-wrap: wrap;
}

.section__registration-button {
    all: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34.9rem;
    height: 7.6rem;
    background-color: #1D1D1D;
    border: .2rem solid #F7F5E9;

    font-family: YS Text;
font-weight: 400;
font-style: Regular;
font-size: 2.2rem;
leading-trim: NONE;
line-height: 2.401rem;
letter-spacing: 0%;
text-align: center;
vertical-align: middle;
color: #F7F5E9;

cursor: pointer;
transition: background-color 0.3s ease;
}

.section__registration-button.main {
    background-color: #E9453A;
    color: #FFFFFF;
    border: none;
}

.section__registration-button.main:hover {
    background-color: #FF453A;
    color: #FFFFFF;
}

.yButton {
    display: none;
}

@media (max-width: 1440px) {
    .section__registration {
        padding-top: 10.4rem;
    }

    .section__registration-logo {
        width: 59.6rem;
    }

    .section__registration-text {
        font-size: 1.95rem;
        max-width: 94.8rem;
        margin-top: 2.2rem;
    }

    .section__registration-buttons-container {
        column-gap: 1.7rem;
        margin-top: 3.1rem;
    }

    .section__registration-button {
        width: 26rem;
        height: 5.7rem;
        font-size: 1.6rem;
    }
}

@media (max-width: 1024px) {
    .section__registration {
        padding-top: 6.4rem;
    }   

    .section__registration-logo {
        width: 42.6rem;
    }

    .section__registration-text {
        font-size: 1.3rem;
        max-width: 94.8rem;
        margin-top: 1.8rem;
    }

    .section__registration-buttons-container {
        column-gap: 0.9rem;
        margin-top: 2.4rem;
    }

    .section__registration-button {
        width: 18.6rem;
        height: 4rem;
        font-size: 1.25rem;
    }
}

@media (max-width: 768px) {
    .section__registration {
        padding-top: 11rem;
    }  
    
    .section__registration-logo {
        width: 31.2rem;
    }

    .section__registration-text {
        font-size: 1.7rem;
        max-width: 35rem;
        margin-top: 2.7rem;
        line-height: 1.2;
    }

    .section__registration-buttons-container {
        column-gap: 0.9rem;
        margin-top: 5.5rem;
        row-gap: 1.2rem;
    }

    .section__registration-button {
        width: 33.5rem;
        height: 6.1rem;
        font-size: 1.75rem;
    }
}

/* FOOTER */
.footer {
    padding-top: 12.8rem;
    padding-bottom: 2.6rem;
}

.footer__container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.footer__text {
    font-family: YS Text;
    font-weight: 300;
    font-style: Light;
    font-size: 1.6rem;
    leading-trim: NONE;
    line-height: 140%;
    letter-spacing: 1%;
    text-align: center;
    color: #FFFFFF;
}

.footer__text:not(:last-child) {
    margin-bottom: 1.9rem;
}

.footer__link {
    color: inherit;
    text-decoration: underline;
    transition: color 0.3s ease;
}

.footer__link:hover {
    color: #FFEBA3;
}

@media (max-width: 1440px) {
    .footer__text {
        font-size: 1.25rem;
    }

    .footer {
        padding-top: 9.4rem;
        padding-bottom: 4.2rem;
    }
}

@media (max-width: 1024px) {
    .footer {
        padding-top: 6.8rem;
        padding-bottom: 2.7rem;
    }

    .footer__text {
        font-size: 0.9rem;
    }   

    .footer__text:not(:last-child) {
        margin-bottom: 1.6rem;
    }
}
@media (max-width: 768px) {
    .footer {
        padding-top: 3.3rem;
        padding-bottom: 3.7rem;
    }

    .footer__text {
        font-size: 1.32rem;
        line-height: 1.2;
    }   

    .footer__text:not(:last-child) {
        margin-bottom: 2.5rem;
    }
}


.illustration {
    position: absolute;
    height: auto;
    object-fit: contain;
}

.illustration.illustration-1 {
    width: 55.9rem;
    right: 0;
    top: 99.1rem;
}

.illustration.illustration-2 {
    width: 58.6rem;
    left: 0;
    top: 166rem;
}

.illustration.illustration-3 {
    width: 13.55rem;
    right: 37.75rem;
    top: 254.2rem;
}

.illustration.illustration-4 {
    width: 35.55rem;
    left: 24.4rem;
    top: 308.8rem;
}

.illustration.illustration-5 {
    width: 36.85rem;
    right: 29.65rem;
    top: 371.4rem;
}

@media (max-width: 1440px) {   
    .illustration.illustration-1 {
        width: 42rem;
        right: 0;
        top: 74.3rem;
    }
    
    .illustration.illustration-2 {
        width: 44rem;
        left: 0;
        top: 124.5rem;
    }
    
    .illustration.illustration-3 {
        width: 10.2rem;
        right: 27.9rem;
        top: 191rem;
    }
    
    .illustration.illustration-4 {
        width: 26.7rem;
        left: 18.3rem;
        top: 231.5rem;
    }
    
    .illustration.illustration-5 {
        width: 27.7rem;
        right: 21.5rem;
        top: 278.4rem;
    }
}

@media (max-width: 1024px) {   
    .illustration.illustration-1 {
        width: 29.9rem;
        right: 0;
        top: 52.8rem;
    }
    
    .illustration.illustration-2 {
        width: 31.3rem;
        left: 0;
        top: 88.4rem;
    }
    
    .illustration.illustration-3 {
        width: 7.3rem;
        right: 20.1rem;
        top: 135.9rem;
    }
    
    .illustration.illustration-4 {
        width: 19rem;
        left: 13.4rem;
        top: 164.8rem;
    }
    
    .illustration.illustration-5 {
        width: 19.7rem;
        right: 15.6rem;
        top: 197.5rem;
    }
}

@media (max-width: 768px) {   
    .illustration.illustration-1 {
        display: none;
    }
    
    .illustration.illustration-2 {
        width: 12.2rem;
        left: 0;
        top: 134rem;
    }
    
    .illustration.illustration-3 {
        width: 9.4rem;
        right: 3.7rem;
        top: 187.7rem;
    }
    
    .illustration.illustration-4 {
        display: none;
    }
    
    .illustration.illustration-5 {
        width: 17.4rem;
        right: unset;
        left: 0;
        top: 248rem;
        rotate: -20deg;
    }
}


dialog[open] {
    background-color: #191817B2;
    padding: 0;
    border: none;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: 0;

    display: flex;
    align-items: center;
    justify-content: center;
}

.dialog__content {
    width: 88rem;
    min-height: 66rem;
    background-color: #2A2928;
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.dialog__content-close {
    all: unset;
    position: absolute;
    top: 3.9rem;
    right: 3.7rem;
    cursor: pointer;

    width: 3.05rem;
    height: 3.05rem;
    object-fit: contain;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.dialog__content-close svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.dialog__content-title-image {
    height: auto;
    object-fit: contain;
}

.dialog__content-text {
    font-family: YS Text;
font-weight: 300;
font-size: 2.5rem;
line-height: 130%;
letter-spacing: 0.01em;
text-align: center;
color: #FFF;
}

.dialog__content-qr {
    width: 23rem;
    height: auto;
    object-fit: contain;
    margin-top: 3.8rem;
}

.dialog__content-legal {
    font-family: YS Text;
font-weight: 300;
font-size: 1rem;
line-height: 100%;
letter-spacing: -0.02em;
text-align: center;
color: #FFFFFF80;
max-width: 72.9rem;
margin: 0 auto;
margin-top: 3rem;
}

.dialog__content-legal a {
    color: inherit;
    text-decoration: underline;
}

.dialog__content-restaurants-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    row-gap: 2.3rem;
    width: 100%;
    padding: 3.7rem 0 3.3rem 5.3rem;
}

.dialog__content-restaurants-item {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 0.8rem;
}

.dialog__content-restaurants-item-title {
    font-family: YS Text;
font-weight: 400;
font-style: Regular;
font-size: 1.7rem;
line-height: 105%;
vertical-align: middle;
text-transform: uppercase;
font-variant-numeric-figure: lining-nums;
font-variant-numeric-spacing: proportional-nums;
color: #E9453A;
}

.dialog__content-restaurants-item-address {
    font-family: YS Text;
    font-weight: 300;
    font-size: 0.9rem;
    line-height: 120%;
    letter-spacing: 0.01em;
    color: #FFFFFF;
}

.dialog__eda_qr .dialog__content-title-image {
    width: 45.1rem;
}

.dialog__eda_qr .dialog__content-text {
    margin-top: 1.5rem;
}

.dialog__promo_code .dialog__content-title-image {
    width: 36.6rem;
}

.dialog__promo_code .dialog__content-text {
    margin-top: 1.8rem;
}

.dialog__msk_restaurants .dialog__content-title-image {
    width: 35.4rem;
    margin-top: 6.5rem;
}

.dialog__spb_restaurants .dialog__content-title-image {
    width: 58.6rem;
    margin-top: 6.2rem;
}

.dialog__spb_restaurants .dialog__content-restaurants-list {
    padding-top: 9.6rem;
}

@media (min-width: 769px) {
    .dialog__msk_restaurants .dialog__content-restaurants-list .dialog__content-restaurants-item:nth-last-child(2)  {
        grid-area: 7 / 3;
        margin-top: -3.5rem;
    }
    .dialog__msk_restaurants .dialog__content-restaurants-list .dialog__content-restaurants-item:nth-last-child(1)  {
        grid-area: 7 / 4;
        margin-top: -3.5rem;
    }
    .dialog__spb_restaurants .dialog__content-restaurants-list .dialog__content-restaurants-item:nth-last-child(1)  {
        margin-top: -2rem;
    }
}

@media (max-width: 768px) {
    .dialog__content {
        width: 34.1rem;
        height: calc(100svh - 1.7rem * 2);
        max-height: 73rem;
        min-height: unset;
        justify-content: start;
        overflow-y: hidden;
    }

    .dialog__content-close {
        top: 2.1rem;
        right: 2.1rem;
        width: 2rem;
        height: 2rem;
    }

    .dialog__msk_restaurants .dialog__content-title-image {
        width: 21.7rem;
        margin-top: 4.2rem;
    }

    .dialog__spb_restaurants .dialog__content-title-image {
        width: 22.7rem;
        margin-top: 3.6rem;
    }

    .dialog__content-restaurants-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        row-gap: 2.3rem;
        column-gap: 1.9rem;
        width: 100%;
        padding: 4.5rem 2.5rem 3.9rem 2rem;
    }

    .dialog__content-restaurants-item-title {
        font-size: 1.5rem;
        letter-spacing: -0.02em;
    }

    .dialog__content-restaurants-item-address {
        font-size: 0.8rem;
    }

    .dialog__spb_restaurants .dialog__content-restaurants-list {
        padding-top: 2.7rem;
        padding-bottom: 0;
    }

    .dialog__spb_restaurants .dialog__content-restaurants-list .dialog__content-restaurants-item br  {
        display: none;
    }
}


/* socials */
.tg_btn {
    position: fixed;
    bottom: 5.9rem;
    right: 5.9rem;
    width: 20rem;
    height: 18.101rem;

    transition: transform 0.3s ease;
    transform: translate(200%);
}

.tg_btn.show {
    transform: translate(0);
}

.tg_btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (max-width: 1440px) {
    .tg_btn {
        width: 15rem;
        height: 13.5rem;
        bottom: 4.5rem;
        right: 4.4rem;
    }
}

@media (max-width: 1024px) {
    .tg_btn {
        width: 10.7rem;
        height: 9.6rem;
        bottom: 3.2rem;
        right: 3.1rem;
    }
}

@media (max-width: 768px) {
    .tg_btn {
        width: 8.2rem;
        height: 7.5rem;
        bottom: 1.8rem;
        right: 2.1rem;
    }
}

@media (min-width: 769px) {
    .dialog__pager-wrap {
        display: none;
    }
}
/* pager arrow for restaurant dialogs (mobile only) */
@media (max-width: 768px) {
    .dialog__pager {
        all: unset;
        position: absolute;
        left: 50%;
        bottom: 1.6rem;
        transform: translateX(-50%);
        width: 2.8rem;
        height: 1.4rem;
        display: none;            /* включаем из JS только когда нужно */
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 5;
    }

    .dialog__pager svg {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    /* чтобы скрытые пункты не занимали места */
    .dialog__content-restaurants-item[hidden] {
        display: none !important;
    }
}

/* pager arrows for restaurant dialogs (mobile only) */
@media (max-width: 768px) {
    .dialog__pager-wrap {
      all: unset;
      position: absolute;
      left: 50%;
      bottom: 2.28rem;
      transform: translateX(-50%);
      display: none;                 /* включаем из JS, когда нужно */
      flex-direction: column;
      gap: 1.2rem;
      align-items: center;
      justify-content: center;
      z-index: 5;
    }
  
    .dialog__pager {
      all: unset;
      width: 2.8rem;
      height: 1.4rem;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
  
    .dialog__pager svg {
      width: 100%;
      height: auto;
      object-fit: contain;
    }
  
    .dialog__pager--prev svg {
      transform: rotate(180deg);
    }
  
    /* чтобы скрытые пункты не занимали места */
    .dialog__content-restaurants-item[hidden] {
      display: none !important;
    }
  }