/* Book menu fix */
.subnav-page.book ul {
    flex-wrap: wrap;
    justify-content: space-evenly;
}

@media (max-width: 1139px) {
    .subnav-page.book ul {
        flex-wrap: nowrap;
        justify-content: space-between;
    }
}

/* Main styles */
:root {
    --c-main: #17479E;
    --c-gray: #F4F4F4;
    --c-lightblue: #D9F3FE;
    --fs-64: 64px;
    --fs-36: 36px;
    --fs-24: 24px;
    --fw-300: 300;
    --fw-500: 500;
    --lh-110: 110%;
    --lh-120: 120%;
    --lh-130: 130%;
    --ls-48: 0.48px;
    --ls-128: 1.28px;
}

.container {
    padding-block: 120px;
    color: #131415;
}

.image-container {
    position: relative;
}

h2, h3 {
    font-family: Halvar;
}

.gap-big {
    width: 100%;
    height: 120px;
    background: var(--c-gray);
}

@media (max-width: 1139px) {
    .gap-big {
        height: 70px;
    }
}

.gap-small {
    width: 100%;
    height: 60px;
}

/* About block */
#about .wrapper {
    container: about / inline-size;
}

#about .container {
    display: grid;
    grid-template-columns: [image-start] 1fr [image-end_text-start] 413px [text-end_gap-start] 35px [gap-end];
    grid-template-rows: [header-start] 43px [header-end_text-start] 1fr [text-end_gap-start] 42px [gap-end];
}

#about h2 {
    grid-column: image-end_text-start / text-end_gap-start;
    grid-row: header-start / header-end_text-start;
    color: var(--c-main);
    font-size: var(--fs-36);
    font-weight: var(--fw-500);
    line-height: var(--lh-120);
    letter-spacing: 0.36px;
}

#about .image-container {
    grid-column: image-start / image-end_text-start;
    grid-row: header-start / text-end_gap-start;
    padding: 25px 29px 0 0;
}

#about .image-container img {
    width: 565px;
}

#about .image-container svg {
    position: absolute;
}

#about .image-container .desktop {
    display: block;
    top: 29px;
    left: 0;
}

#about .image-container .tablet {
    display: none;
    top: 65px;
}

#about .image-container .mobile {
    display: none;
    top: 6px;
}

#about p {
    grid-column: image-end_text-start / text-end_gap-start;
    grid-row: header-end_text-start / text-end_gap-start;
    padding-top: 50px;
    font-weight: var(--fw-300);
    line-height: var(--lh-130);
}

@media (max-width: 1139px) {
    #about {
        background: var(--c-gray);
    }
}

@container about (width < 1110px) {
    #about .container {
        grid-template-columns: auto;
        grid-template-rows: auto;
    }

    #about:where(h2, .image-container, p) {
        grid-column: 1 / 2;
    }

    #about h2 {
        grid-row: 1 / 2;
        font-size: var(--fs-24);
        letter-spacing: var(--ls-48);
        text-transform: uppercase;
    }

    #about .image-container {
        grid-row: 2 / 3;
        padding: 80px 0 0 0;
    }

    #about .image-container img {
        width: 615px;
    }

    #about .image-container .desktop {
        display: none;
    }

    #about .image-container .tablet {
        display: block;
    }

    #about p {
        grid-row: 3 / 4;
    }
}

@container about (width < 690px) {
    #about .image-container {
        padding: 50px 0 0 0;
    }

    #about .image-container img {
        width: 309px;
    }

    #about .image-container .tablet {
        display: none;
    }

    #about .image-container .mobile {
        display: block;
    }
}

/* Video block */
#video .wrapper {
    container: video / inline-size;
}

#video h2 {
    color: var(--c-main);
    font-size: var(--fs-24);
    font-weight: var(--fw-500);
    line-height: var(--lh-120);
    letter-spacing: var(--ls-48);
    text-transform: uppercase;
    margin-bottom: 50px;
}

#video p {
    color: #131415;
    font-weight: var(--fw-300);
    line-height: var(--lh-130);
    margin-bottom: 50px;
}

#video #videoContainer {
    width: 100%;
}

#video #videoContainer .hidden {
    display: none;
}

#video #stub {
    display: none;
    cursor: pointer;
}

#video #stub img {
    width: 100%;
}

@media (max-width: 1139px) {
    #video {
        background: var(--c-gray);
    }
}

@container video (width < 1110px) {
    #video #stub {
        display: block;
    }

    #video #stub .mobile {
        display: none;
    }
}

@container video (width < 690px) {
    #video #stub .tablet {
        display: none;
    }

    #video #stub .mobile {
        display: block;
    }
}

/* Name block */
#name {
    background: var(--c-gray);
}

#name .wrapper {
    container: name / inline-size;
}

#name .container {
    display: grid;
    grid-template-columns: [left-start] 540px [left-end_right-start] auto [right-end];
    grid-template-rows: 70px auto;
    gap: 50px 125px;
}

#name h2 {
    color: var(--c-main);
    font-size: var(--fs-64);
    font-weight: var(--fw-500);
    line-height: var(--lh-110);
    letter-spacing: var(--ls-128);
}

#name h3 {
    color: var(--c-main);
    font-size: var(--fs-24);
    font-weight: var(--fw-500);
    line-height: var(--lh-120);
    letter-spacing: var(--ls-48);
    text-transform: uppercase;
    align-self: center;
}

#name .container > img {
    width: 100%;
    height: 344px;
}

#name .image-container img {
    display: block;
    width: 353px;
    margin: 0 0 39px 27px;
}

#name .image-container::after {
    content: "";
    background-image: url("/local/templates/yatec/images/book-page/name.png");
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    bottom: -39px;
    left: 0;
    width: 54px;
    height: 67px;
}

#name figure figcaption {
    padding: 39px 59px 0 0;
    font-weight: var(--fw-300);
    line-height: var(--lh-130);
}

#name figure span {
    display: none;
}

@container name (width < 1110px) {
    #name .container {
        grid-template-columns: auto;
        grid-template-rows: auto;
    }

    #name .container > h3 {
        display: none;
    }

    #name .container img {
        height: 300px;
    }

    #name .image-container img {
        width: 100%;
        margin: 0;
    }

    #name .image-container::after {
        bottom: -24px;
        left: unset;
        right: 0;
        width: 56px;
        height: 70px;
    }

    #name figure figcaption {
        padding: 50px 0 0 0;
    }

    #name figure span {
        display: block;
        max-width: 367px;
        margin-top: 50px;
        color: var(--c-main);
        font-family: Halvar;
        font-size: var(--fs-24);
        font-weight: var(--fw-500);
        line-height: var(--lh-120);
        letter-spacing: var(--ls-48);
        text-transform: uppercase;
    }
}

@container name (width < 690px) {
    #name h2 {
        font-size: var(--fs-24);
        line-height: var(--lh-120);
        letter-spacing: var(--ls-48);
        text-transform: uppercase;
    }

    #name .container img {
        height: 150px;
    }

    #name figure {
        display: flex;
        flex-direction: column;
        gap: 50px;
    }

    #name .image-container {
        order: 2;
    }

    #name .image-container::after {
        bottom: -19px;
        width: 36px;
        height: 45px;
    }

    #name figure span {
        order: 1;
        margin: 0;
        max-width: 100%;
    }

    #name figure figcaption {
        order: 3;
        padding: 0;
    }
}

/* Map block */
#map .wrapper {
    container: map / inline-size;
}

#map h2 {
    color: var(--c-main);
    font-size: var(--fs-24);
    font-weight: var(--fw-500);
    line-height: var(--lh-120);
    letter-spacing: var(--ls-48);
    text-transform: uppercase;
    margin-bottom: 50px;
}

#map img {
    width: 100%;
}

@media (max-width: 719px) {
    #map {
        background: var(--c-gray);
    }
}

/* History 1 block */
#history_1 {
    background: var(--c-gray);
}

#history_1 .wrapper {
    container: history-one / inline-size;
}

#history_1 .container {
    display: grid;
    grid-template-columns: 593px auto;
    gap: 50px 0;
}

#history_1 h2 {
    max-width: 534px;
    color: var(--c-main);
    font-size: var(--fs-24);
    font-weight: var(--fw-500);
    line-height: var(--lh-120);
}

#history_1 .image-container {
    grid-column: 1 / 3;
}

#history_1 .image-container img {
    width: 100%;
}

#history_1 .image-container::after {
    content: "";
    background-image: url("/local/templates/yatec/images/book-page/history_1.png");
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    bottom: -200px;
    right: 0;
    width: 194px;
    height: 542px;
}

#history_1 p {
    font-weight: var(--fw-300);
    line-height: var(--lh-130);
}

@container history-one (width < 1110px) {
    #history_1 .container {
        grid-template-columns: auto;
    }

    #history_1 .image-container::after {
        bottom: -97px;
        width: 126px;
        height: 351px;
    }

    #history_1 p {
        margin-top: 95px;
    }
}

@container history-one (width < 690px) {
    #history_1 .image-container::after {
        bottom: -33px;
        width: 65px;
        height: 178px;
    }

    #history_1 p {
        margin-top: 33px;
    }
}

/* History 2 block */
#history_2 {
    background: var(--c-gray);
}

#history_2 .wrapper {
    container: history-two / inline-size;
}

#history_2 .container {
    display: grid;
    grid-template-columns: 635px auto;
    gap: 0 96px;
}

#history_2 h2 {
    color: var(--c-main);
    font-size: var(--fs-24);
    font-weight: var(--fw-500);
    line-height: var(--lh-120);
    letter-spacing: var(--ls-48);
    text-transform: uppercase;
    margin-bottom: 20px;
}

#history_2 p {
    line-height: var(--lh-130);
}

#history_2 p.subheader {
    font-weight: var(--fw-500);
}

#history_2 p:not(.subheader) {
    font-weight: var(--fw-300);
}

#history_2 .main > *:not(:where(:first-child, :last-child)) {
    margin-bottom: 50px;
}

#history_2 figure img {
    width: 100%;
    height: 402px;
}

#history_2 figcaption {
    color: var(--c-main);
    font-size: 14px;
}

#history_2 .secondary {
    display: grid;
    grid-template-columns: 124px 255px;
}

#history_2 .secondary > *:last-child {
    background: var(--c-main);
    position: relative;
}

#history_2 .secondary > *:last-child > * {
    position: absolute;
}

#history_2 .secondary > *:last-child .logotype {
    top: 16px;
    right: 28px;
}

#history_2 .secondary > *:last-child .vector.desktop {
    top: 107px;
    right: 161px;
}

#history_2 .secondary > *:last-child .vector.tablet {
    display: none;
}

#history_2 .secondary > *:last-child .image {
    top: 461px;
    right: 19px;
    width: 360px;
    height: 240px;
}

@container history-two (width < 1110px) {
    #history_2 .container {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto 240px;
        gap: 50px 0;
    }

    #history_2 h2 {
        padding-right: 100px;
    }

    #history_2 p.subheader {
        padding-right: 100px;
    }

    #history_2 .secondary {
        grid-template-columns: 360px auto;
    }

    #history_2 .secondary > *:first-child {
        order: 2;
        background: var(--c-main);
        margin-top: 60px;
    }

    #history_2 .secondary > *:last-child {
        order: 1;
    }

    #history_2 .secondary > *:last-child .logotype {
        display: none;
    }

    #history_2 .secondary > *:last-child .vector.desktop {
        display: none;
    }

    #history_2 .secondary > *:last-child .vector.tablet {
        display: block;
        top: 0;
        left: 491px;
        width: 173px;
        height: 184px;
    }

    #history_2 .secondary > *:last-child .image {
        top: 0;
        right: unset;
        left: 0;
    }
}

@container history-two (width < 690px) {
    #history_2 .container {
        grid-template-rows: auto;
    }

    #history_2 h2 {
        padding-right: 0;
    }

    #history_2 p.subheader {
        padding-right: 0;
    }

    #history_2 p:not(.subheader) {
        margin-top: -25px;
    }

    #history_2 figure img {
        height: auto;
    }

    #history_2 .secondary {
        display: none;
    }
}

/* Timeline 1 block */
#timeline_1 {
    background: linear-gradient(90deg, #17479E 0.25%, #0066AE 63.09%, #008FCC 99.99%);
}

#timeline_1 .wrapper {
    container: timeline-one / inline-size;
}

#timeline_1 .container {
    color: #FFF;
}

#timeline_1 h2 {
    font-size: var(--fs-24);
    font-weight: var(--fw-500);
    line-height: var(--lh-120);
    letter-spacing: var(--ls-48);
    text-transform: uppercase;
    margin-bottom: 50px;
}

#timeline_1 img {
    width: 100%;
}

#timeline_1 .tablet {
    display: none;
}

#timeline_1 .mobile {
    display: none;
}

@media (max-width: 1139px) {
    #timeline_1 {
        background: linear-gradient(180deg, #17479E 0%, #0066AE 62.24%, #008FCC 98.79%);
    }
}

@media (max-width: 719px) {
    #timeline_1 {
        background: linear-gradient(180deg, #17479E 0%, #0066AE 73.93%, #008FCC 98.79%);
    }
}

@container timeline-one (width < 1110px) {
    #timeline_1 .container {
        position: relative;
        height: 1277px;
    }

    #timeline_1 h2 {
        position: absolute;
        top: 136px;
        left: 0;
    }

    #timeline_1 .desktop {
        display: none;
    }

    #timeline_1 .tablet {
        display: block;
        position: absolute;
        top: 120px;
        left: 0;
    }
}

@container timeline-one (width < 690px) {
    #timeline_1 .container {
        position: static;
        height: auto;
    }

    #timeline_1 h2 {
        position: static;
    }

    #timeline_1 .tablet {
        display: none;
    }

    #timeline_1 .mobile {
        display: block;
    }
}

/* Timeline 2 block */
#timeline_2 {
    background: linear-gradient(90deg, rgba(17, 170, 255, 0.70) 0.25%, rgba(140, 215, 254, 0.70) 51.62%, #D9F3FE 99.99%);
}

#timeline_2 .wrapper {
    container: timeline-two / inline-size;
}

#timeline_2 .container {
    color: var(--c-main);
}

#timeline_2 h2 {
    font-size: var(--fs-24);
    font-weight: var(--fw-500);
    line-height: var(--lh-120);
    letter-spacing: var(--ls-48);
    text-transform: uppercase;
    margin-bottom: 50px;
}

#timeline_2 img {
    width: 100%;
}

#timeline_2 .tablet {
    display: none;
}

#timeline_2 .mobile {
    display: none;
}

@media (max-width: 1139px) {
    #timeline_2 {
        background: linear-gradient(180deg, rgba(17, 170, 255, 0.70) 0%, rgba(140, 215, 254, 0.70) 34.96%, #D9F3FE 100%);
    }
}

@media (max-width: 719px) {
    #timeline_2 {
        background: linear-gradient(180deg, rgba(17, 170, 255, 0.70) -0.01%, rgba(140, 215, 254, 0.70) 39.59%, #D9F3FE 99.99%);
    }
}

@container timeline-two (width < 1110px) {
    #timeline_2 .desktop {
        display: none;
    }

    #timeline_2 .tablet {
        display: block;
    }
}

@container timeline-two (width < 690px) {
    #timeline_2 .tablet {
        display: none;
    }

    #timeline_2 .mobile {
        display: block;
    }
}

/* Well 1 block */
#well_1 {
    background: var(--c-gray);
}

#well_1 .wrapper {
    container: well-one / inline-size;
}

#well_1 .container {
    display: grid;
    grid-template-columns: 445px 1fr;
    grid-template-rows: 87px 1fr;
    grid-template-areas: "image header"
                         "image text";
    gap: 50px 30px;
    background: url("/upload/book/book_9-desktop.png") no-repeat right top;
}

#well_1 h2 {
    grid-area: header;
    color: var(--c-main);
    font-size: var(--fs-24);
    font-weight: var(--fw-500);
    line-height: var(--lh-120);
    letter-spacing: var(--ls-48);
    text-transform: uppercase;
    max-width: 421px;
}

#well_1 .image-container {
    grid-area: image;
    width: 100%;
    height: 576px;
}

#well_1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

#well_1 p {
    grid-area: text;
    font-weight: var(--fw-300);
    line-height: var(--lh-130);
    max-width: 307px;
}

@container well-one (width < 1110px) {
    #well_1 .container {
        grid-template-columns: auto;
        grid-template-rows: auto;
        grid-template-areas: "header"
                             "text"
                             "image";
        background: url("/upload/book/book_9-tablet.png") no-repeat right top;
    }

    #well_1 h2 {
        max-width: 449px;
    }

    #well_1 .image-container {
        height: 560px;
    }

    #well_1 p {
        max-width: 449px;
    }
}

@container well-one (width < 690px) {
    #well_1 .container {
        background: none;
        position: relative;
        padding-bottom: 173px;
    }

    #well_1 .container::after {
        position: absolute;
        content: url("/upload/book/book_9-mobile.png");
        bottom: 120px;
        right: 5px;
        width: 112px;
        height: 260px;
    }

    #well_1 h2 {
        max-width: 100%;
    }

    #well_1 .image-container {
        width: 326px;
        height: 326px;
    }

    #well_1 p {
        max-width: 100%;
    }
}

/* Well 27 block */
#well_27 {
    background: linear-gradient(90deg, var(--c-lightblue) 0%, var(--c-lightblue) 50%, var(--c-main) 50%, var(--c-main) 100%);
}

#well_27 .wrapper {
    container: well-twenty-seven / inline-size;
}

#well_27 .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: "text image"
                         "text image";
    position: relative;
}

#well_27 .container::before {
    position: absolute;
    content: "";
    background-image: url("/local/templates/yatec/images/book-page/tower.png");
    background-size: 262px 422px;
    top: calc(50% - 211px);
    left: calc(50% - 131px);
    width: 262px;
    height: 422px;
}

#well_27 .text-container {
    grid-area: text;
}

#well_27 h2 {
    color: var(--c-main);
    font-size: var(--fs-24);
    font-weight: var(--fw-500);
    line-height: var(--lh-120);
    letter-spacing: var(--ls-48);
    text-transform: uppercase;
    margin-bottom: 50px;
    max-width: 440px;
}

#well_27 p {
    font-weight: var(--fw-300);
    line-height: var(--lh-130);
    max-width: 406px;
}

#well_27 .image-container {
    grid-area: image;
    align-self: end;
    justify-self: end;
    position: relative;
}

#well_27 .image-container img {
    width: 378px;
    height: 256px;
}

#well_27 .image-container::before {
    position: absolute;
    content: "";
    background-image: url("/local/templates/yatec/images/book-page/well_vector.png");
    background-size: 140px 160px;
    top: -248px;
    left: 0;
    width: 140px;
    height: 160px;
}

@media (max-width: 1139px) {
    #well_27 {
        background: linear-gradient(180deg, var(--c-lightblue) 0%, var(--c-lightblue) 671px, var(--c-main) 671px, var(--c-main) 100%);
    }
}

@media (max-width: 719px) {
    #well_27 {
        background: linear-gradient(180deg, var(--c-lightblue) 0%, var(--c-lightblue) 876px, var(--c-main) 876px, var(--c-main) 100%);
    }
}

@container well-twenty-seven (width < 1110px) {
    #well_27 .container {
        grid-template-columns: auto;
        grid-template-rows: 551px 757px;
        grid-template-areas: "text"
                             "image";
    }

    #well_27 p {
        max-width: 100%;
    }

    #well_27 .container::before {
        background-size: 254px 410px;
        top: 551px;
        left: unset;
        right: 0;
        width: 254px;
        height: 410px;
    }

    #well_27 .image-container::before {
        top: -210px;
        left: 40px;
    }

    #well_27 .image-container img {
        width: 100%;
        height: 410px;
    }
}

@container well-twenty-seven (width < 690px) {
    #well_27 .container {
        grid-template-rows: 756px 320px;
    }

    #well_27 .container::before {
        background-size: 125px 200px;
        top: 792px;
        width: 125px;
        height: 200px;
    }

    #well_27 .image-container {
        justify-self: start;
    }

    #well_27 .image-container::before {
        background-size: 84px 96px;
        top: -130px;
        left: 28px;
        width: 84px;
        height: 96px;
    }


    #well_27 .image-container img {
        width: 337px;
        height: 178px;
    }
}

/* Schema block */
#schema .wrapper {
    container: schema / inline-size;
}

#schema .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 50px;
}

#schema h2 {
    color: var(--c-main);
    font-size: var(--fs-24);
    font-weight: var(--fw-500);
    line-height: var(--lh-120);
    letter-spacing: var(--ls-48);
    text-transform: uppercase;
    max-width: 370px;
}

#schema .header .tablet {
    display: none;
}

#schema .header .mobile {
    display: none;
}

#schema img {
    width: 100%;
}

#schema .schema-tablet {
    display: none;
}

#schema .schema-mobile {
    display: none;
}

@container schema (width < 1110px) {
    #schema .header .desktop {
        display: none;
    }

    #schema .header .tablet {
        display: block;
    }

    #schema .schema-desktop {
        display: none;
    }

    #schema .schema-tablet {
        display: block;
    }
}

@container schema (width < 690px) {
    #schema .header {
        flex-direction: column-reverse;
        gap: 37px;
    }

    #schema h2 {
        max-width: 100%;
    }

    #schema .header .tablet {
        display: none;
    }

    #schema .header .mobile {
        display: block;
        align-self: end;
    }

    #schema .schema-tablet {
        display: none;
    }

    #schema .schema-mobile {
        display: block;
    }
}

/* Legends block */
#legends {
    background: var(--c-lightblue);
}

#legends .wrapper {
    container: legends / inline-size;
}

#legends .container {
    display: grid;
    grid-template-columns: 471px 540px;
    grid-template-rows: 124px 210px;
    grid-template-areas: ". text"
                         "header .";
    gap: 171px 99px;
}

#legends h2 {
    grid-area: header;
    color: var(--c-main);
    font-size: var(--fs-64);
    font-weight: var(--fw-500);
    line-height: var(--lh-110);
    letter-spacing: var(--ls-128);
    text-transform: uppercase;
}

#legends p {
    grid-area: text;
    color: var(--c-main);
    font-size: var(--fs-24);
    line-height: var(--lh-130);
}

@container legends (width < 1110px) {
    #legends .container {
        grid-template-columns: auto;
        grid-template-rows: auto;
        grid-template-areas: "header"
                             "text";
        gap: 50px;
    }

    #legends h2 {
        font-size: var(--fs-24);
        line-height: var(--lh-120);
        letter-spacing: var(--ls-48);
    }

    #legends p {
        max-width: 625px;
    }
}

@container legends (width < 690px) {
    #legends p {
        max-width: 100%;
        font-size: 16px;
        font-weight: var(--fw-300);
        line-height: var(--lh-130);
    }
}

/* Legends 1 block */
#legends_1 .wrapper {
    container: legends-one / inline-size;
}

#legends_1 .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr auto;
    gap: 50px 30px;
}

#legends_1 figure {
    position: relative;
}

#legends_1 img {
    width: 100%;
}

#legends_1 figcaption {
    position: absolute;
    bottom: 42px;
    left: 0;
    width: 100%;
    text-align: center;
    color: #FFF;
    font-size: 40px;
    font-weight: var(--fw-500);
    line-height: var(--lh-120);
    letter-spacing: 0.8px;
}

#legends_1 p {
    font-weight: var(--fw-300);
    line-height: var(--lh-130);
}

@container legends-one (width < 690px) {
    #legends_1 .container {
        grid-template-columns: auto;
        grid-template-rows: auto;
    }

    #legends_1 .container > *:nth-child(1) {
        order: 1;
    }

    #legends_1 .container > *:nth-child(2) {
        order: 3;
    }

    #legends_1 .container > *:nth-child(3) {
        order: 2;
    }

    #legends_1 .container > *:nth-child(4) {
        order: 4;
    }

    #legends_1 figcaption {
        font-size: var(--fs-24);
        letter-spacing: var(--ls-48);
    }
}

/* Legends 2 block */
#legends_2 {
    background: var(--c-gray);
}

#legends_2 .wrapper {
    container: legends-two / inline-size;
}

#legends_2 .container {
    display: grid;
    grid-template-columns: 381px 654px;
    grid-template-rows: 29px auto;
    grid-template-areas: "header pictures"
                         "text pictures";
    gap: 50px 75px;
}

#legends_2 h2 {
    grid-area: header;
    color: var(--c-main);
    font-size: var(--fs-24);
    font-weight: var(--fw-500);
    line-height: var(--lh-120);
    letter-spacing: var(--ls-48);
    text-transform: uppercase;
}

#legends_2 p {
    grid-area: text;
    font-weight: var(--fw-300);
    line-height: var(--lh-130);
}

#legends_2 .pictures {
    grid-area: pictures;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
}

#legends_2 .image-container {
    width: 288px;
    height: 199px;
}

#legends_2 .image-container > img {
    width: 100%;
    height: 100%;
}

#legends_2 .image-container svg {
    position: absolute;
}

#legends_2 .image-container .desktop {
    display: block;
    bottom: -16px;
    left: -34px;
}

#legends_2 .image-container .tablet {
    display: none;
    bottom: -27px;
    left: unset;
    right: 0;
}

#legends_2 .image-container .mobile {
    display: none;
    bottom: -14px;
    left: unset;
    right: -19px;
}

@media (max-width: 719px) {
    #legends_2 {
        background: #FFF;
    }
}

@container legends-two (width < 1110px) {
    #legends_2 .container {
        grid-template-columns: auto;
        grid-template-rows: auto;
        grid-template-areas: "header"
                         "text"
                         "pictures";
    }

    #legends_2 .pictures {
        gap: 20px;
    }

    #legends_2 .image-container .desktop {
        display: none;
    }

    #legends_2 .image-container .tablet {
        display: block;
    }

    #legends_2 .pictures > img {
        width: 382px;
        height: 486px;
    }
}

@container legends-two (width < 690px) {
    #legends_2 .pictures {
        flex-direction: column;
        align-items: start;
    }

    #legends_2 .pictures {
        gap: 42px;
    }

    #legends_2 .image-container {
        width: 252px;
        height: 173px;
    }

    #legends_2 .image-container .tablet {
        display: none;
    }

    #legends_2 .image-container .mobile {
        display: block;
    }

    #legends_2 .pictures > img {
        width: 100%;
        height: 369px;
    }
}

/* Nature block */
#nature .wrapper {
    container: nature / inline-size;
}

#nature .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 29px auto 58px auto;
    gap: 50px 30px;
}

#nature .container > *:nth-child(1) {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
}

#nature .container > *:nth-child(2) {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

#nature .container > *:nth-child(3) {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

#nature .container > *:nth-child(4) {
    grid-column: 2 / 3;
    grid-row: 3 / 5;
}

#nature .container > *:nth-child(5) {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}

#nature .container > *:nth-child(6) {
    grid-column: 1 / 2;
    grid-row: 4 / 5;
}

#nature img {
    width: 100%;
}

#nature h2 {
    color: var(--c-main);
    font-size: var(--fs-24);
    font-weight: var(--fw-500);
    line-height: var(--lh-120);
    letter-spacing: var(--ls-48);
    text-transform: uppercase;
}

#nature p {
    font-weight: var(--fw-300);
    line-height: var(--lh-130);
}

@container nature (width < 1110px) {
    #nature .container {
        grid-template-columns: auto;
        grid-template-rows: auto;
    }

    #nature .container > * {
        grid-column: auto !important;
    }

    #nature .container > *:nth-child(1) {
        grid-row: 2 / 3;
    }

    #nature .container > *:nth-child(2) {
        grid-row: 1 / 2;
    }

    #nature .container > *:nth-child(3) {
        grid-row: 3 / 4;
    }

    #nature .container > *:nth-child(4) {
        grid-row: 5 / 6;
    }

    #nature .container > *:nth-child(5) {
        grid-row: 4 / 5;
    }

    #nature .container > *:nth-child(6) {
        grid-row: 6 / 7;
    }
}

/* Rhino block */
#rhino {
    background: var(--c-lightblue);
}

#rhino .wrapper {
    container: rhino / inline-size;
}

#rhino .container {
    display: grid;
    grid-template-columns: 462px auto;
    gap: 50px 0;
}

#rhino h2 {
    max-width: 470px;
    color: var(--c-main);
    font-size: var(--fs-24);
    font-weight: var(--fw-500);
    line-height: var(--lh-120);
    letter-spacing: var(--ls-48);
    text-transform: uppercase;
}

#rhino .image-container {
    grid-column: 1 / 3;
}

#rhino .image-container img {
    width: 100%;
    height: 100%;
}

#rhino .image-container::after {
    content: "";
    background-image: url("/local/templates/yatec/images/book-page/rhino.png");
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    bottom: -73px;
    right: 0;
    width: 103px;
    height: 159px;
}

#rhino p {
    font-weight: var(--fw-300);
    line-height: var(--lh-130);
}

@container rhino (width < 1110px) {
    #rhino .container {
        grid-template-columns: auto;
    }

    #rhino h2 {
        max-width: 100%;
    }

    #rhino .image-container::after {
        bottom: -41px;
    }
}

@container rhino (width < 690px) {
    #rhino .image-container::after {
        bottom: -26px;
        width: 50px;
        height: 77px;
    }
}

/* About company block */
#about_company {
    background: var(--c-gray);
}

#about_company .wrapper {
    container: about-company / inline-size;
}

#about_company .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-template-areas: "header image"
                         "text image";
    gap: 50px 30px;
}

#about_company .container .header {
    grid-area: header;
}

#about_company .container .header img {
    margin-bottom: 20px;
}

#about_company .container .header p {
    color: var(--c-main);
    font-weight: var(--fw-500);
    line-height: var(--lh-120);
    letter-spacing: 0.32px;
}

#about_company .container .text {
    grid-area: text;
}

#about_company .container .text p {
    font-weight: var(--fw-300);
    line-height: var(--lh-130);
}

#about_company .container .text p:first-child {
    margin-bottom: 26px;
}

#about_company .container .image-container {
    grid-area: image;
    width: 100%;
    height: 529px;
    overflow: hidden;
}

#about_company .container .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right;
}

@media (max-width: 1139px) {
    #about_company {
        background: #FFF;
    }
}

@container about-company (width < 1110px) {
    #about_company .container {
        grid-template-columns: auto;
        grid-template-rows: auto;
        grid-template-areas: "header"
                             "image"
                             "text";
    }

    #about_company .container .header p {
        max-width: 611px;
    }
}

@container about-company (width < 690px) {
    #about_company .container .header img {
        width: 220px;
        height: 56px;
        margin-bottom: 10px;
    }

    #about_company .container .header p {
        max-width: 100%;
    }

    #about_company .container .text p:first-child {
        margin-bottom: 13px;
    }

    #about_company .container .image-container {
        height: 258px;
    }
}

/* Facts block */
#facts {
    background: var(--c-gray);
}

#facts .wrapper {
    container: facts / inline-size;
}

#facts .container {
    display: grid;
    grid-template-columns: 445px 125px 540px;
    grid-template-rows: 74px 1fr 96px;
    grid-template-areas: "header header header"
                         "image . list"
                         "image . text";
    gap: 46px 0;
}

#facts .container .header {
    grid-area: header;
}

#facts .container .image-container {
    grid-area: image;
    width: 100%;
    height: 640px;
    overflow: hidden;
}

#facts .container .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

#facts .container ul {
    grid-area: list;
    list-style: none;
}

#facts .container ul li {
    display: grid;
    grid-template-columns: 20px 1fr;
    align-items: center;
    gap: 20px;
    font-weight: var(--fw-300);
    line-height: var(--lh-130);
}

#facts .container ul li:not(:last-child) {
    margin-bottom: 20px;
}

#facts .container p {
    grid-area: text;
    color: var(--c-main);
    font-family: Halvar;
    font-size: 20px;
    font-weight: var(--fw-500);
    line-height: var(--lh-120);
    letter-spacing: 0.4px;
    max-width: 480px;
}

@media (max-width: 1139px) {
    #facts {
        background: #FFF;
    }
}

@container facts (width < 1110px) {
    #facts .container {
        grid-template-columns: 210px 30px 450px;
        grid-template-rows: 74px 1fr 69px;
        grid-template-areas: "header header header"
                             "image . list"
                             "text text text";
        gap: 50px 0;
    }

    #facts .container .image-container {
        height: 555px;
    }

    #facts .container ul li:not(:last-child) {
        margin-bottom: 26px;
    }

    #facts .container p {
        max-width: 100%;
    }
}

@container facts (width < 690px) {
    #facts .container {
        grid-template-columns: auto;
        grid-template-rows: auto;
        grid-template-areas: "header"
                             "list"
                             "image"
                             "text";
    }

    #facts .container .header {
        width: 100%;
        height: 49px;
    }

    #facts .container .image-container {
        height: 437px;
    }

    #facts .container ul li {
        grid-template-columns: 8px 1fr;
        gap: 10px;
    }

    #facts .container ul li svg {
        width: 8px;
        height: 8px;
    }

    #facts .container ul li:not(:last-child) {
        margin-bottom: 24px;
    }
}

/* Interactive map block */
#interactive_map {
    background: url("/upload/book/book_20.png") no-repeat center left;
    background-size: cover;
}

#interactive_map .wrapper {
    container: interactive-map / inline-size;
}

#interactive_map .container {
    height: 597px;
    padding: 50px 0;
}

#interactive_map .container .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 198px;
}

#interactive_map .container .header .mobile {
    display: none;
}

#interactive_map .container h2 {
    color: #FFF;
    font-size: var(--fs-64);
    font-weight: var(--fw-500);
    line-height: var(--lh-120);
    letter-spacing: 1.92px;
    text-align: center;
    margin-bottom: 50px;
}

#interactive_map .container p {
    text-align: center;
}

#interactive_map .container p a {
    color: #FFF;
    font-size: var(--fs-24);
    font-weight: 700;
    line-height: var(--lh-130);
    letter-spacing: 0.24px;
    text-decoration: underline;
}

@container interactive-map (width < 1110px) {
    #interactive_map .container .header {
        margin-bottom: 88px;
    }

    #interactive_map .container h2 {
        font-size: var(--fs-36);
        letter-spacing: 0.72px;
        margin-bottom: 30px;
    }

    #interactive_map .container p a {
        font-size: 16px;
        letter-spacing: 0.16px;
    }
}

@container interactive-map (width < 690px) {
    #interactive_map .container .header {
        margin-bottom: 125px;
    }

    #interactive_map .container h2 {
        line-height: 100%;
    }

    #interactive_map .container .header .desktop {
        display: none;
    }

    #interactive_map .container .header .mobile {
        display: block;
    }

    #interactive_map .container p {
        max-width: 171px;
        margin-inline: auto;
    }
}


/* New job page*/
.page-work h2{
    font-size: var(--fs-24);
    font-weight: var(--fw-500);
    line-height: var(--lh-120);
    text-transform: uppercase;
}
.page-work p{
    font-weight: var(--fw-300);
    line-height: var(--lh-130);
}
.page-work .video-items-wrap{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px 30px;
}
.page-work .video-items-wrap .video-item{
    display: grid;
    grid-template-rows: auto 1fr;
}
.page-work .video-items-wrap .video-item .title-video{
    text-transform: uppercase;
    font-size: var(--fs-24);
    font-weight: var(--fw-500);
    line-height: var(--lh-120);
    margin-bottom: 20px;
}
.page-work .video-items-wrap .video-item .video-body{
    height: 482px;
    background: rgba(19, 20, 21, 0.45);
    overflow: hidden;
    align-self: end;
}
.page-work .slider-block{
    overflow: hidden;
}
.page-work .slider-block .swiper-slide img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.page-work .slider-block .swiper-slide .image{
    height: 350px;
    overflow: hidden;
    background: #ddd;
}
.page-work .video-container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    position: relative;
    height: 100%;
}
.page-work .video-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url("../images/career-page/job-page/icon-play.svg") no-repeat center;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 5;
    border: none;
}
.page-work .video-container .video-card{
    overflow: hidden;
    position: relative;
    height: 100%;
    width: 100%;
}
.page-work .video-container .video-card video{
    object-fit: cover;
}
.page-work .video-container .video-card:before{
    content: "";
    background: rgba(19, 20, 21, 0.45);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.page-work .video-container .video-card.play:before{
    background: transparent;
    z-index: 0;
}
.page-work .video-card img.video-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
@media (max-width: 1110px){
    .page-work .video-items-wrap{
        grid-template-columns: auto;
    }
    .page-work .video-items-wrap .video-item .video-body{
        height: 300px;
    }

}
@media (max-width: 690px){
    .page-work .video-items-wrap .video-item .video-body{
        height: 220px;
    }
}

#growth,
#family-work,
#location-work,
#after-work,
#workplaces{
    background: var(--c-gray);
}

#growth .wrapper{
    container-name: growth;
    container-type: inline-size;
}

#growth .container {
    display: grid;
    grid-template-columns: 445px 95px 540px;
    align-items: center;
    grid-template-areas:
        "h2 h2 h2"
        "image . text"
        "slider slider slider";
    gap: 50px 0;

}

#growth h2{
    max-width: 425px;
    color: var(--c-main);
    grid-area: h2;
}
#growth .image-container{
    grid-area: image;
    width: 100%;
    height: 220px;
    overflow: hidden;
}
#growth .image-container img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
#growth p{
    font-weight: var(--fw-300);
    line-height: var(--lh-130);
    grid-area: text;
}
#growth .slider-block{
    grid-column: 1 / 2;
    grid-area: slider;
    overflow: hidden;
}


@container growth (width < 1110px){
    #growth .container{
        grid-template-columns: auto;
        grid-template-areas:
        "h2"
        "image"
        "text"
        "slider";
    }
}

#life-style .wrapper{
    container-name: life-style;
    container-type: inline-size;
}
#life-style h2{
    margin-bottom: 50px;
}

#life-style p{
    font-size: 16px;
    font-style: normal;
    font-weight: var(--fw-500);
    margin-bottom: 40px;
}
#life-style ul{
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: column;
    grid-template-rows: repeat(5, auto);
    gap: 50px 110px;
    margin-bottom: 80px;
}
#life-style ul li{
    display: grid;
    grid-template-columns: 30px 1fr;
    align-items: center;
    gap: 50px;
    font-weight: var(--fw-300);
    line-height: var(--lh-130);
}
#life-style ul li .icon{
    display: block;
    width: 30px;
    height: 30px;
}
#life-style ul li span img{
    width: 100%;
}

@container life-style (width < 1110px){
    #life-style ul{
        grid-template-columns: auto;
        grid-auto-flow: initial;
        grid-template-rows: auto;
    }
}
@container life-style (width < 690px){
    #life-style ul li{
        gap: 20px;
        align-items: self-start;
    }
}

#family-work .wrapper{
    container-name: family-work;
    container-type: inline-size;
}

#family-work h2{
    margin-bottom: 30px;
}
#family-work ul{
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
#family-work ul li{
    text-transform: uppercase;
    font-weight: var(--fw-300);
    line-height: var(--lh-130);
    display: grid;
    grid-template-columns: 65px 1fr;
    align-items: center;
    gap: 20px;
}
@container family-work (width < 1110px){
    #family-work ul{
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
    #family-work ul li:last-child{
        grid-column: 1 / -1;
    }
}


#location-work .wrapper{
    container-name: location-work;
    container-type: inline-size;
}
#location-work .container{
    display: grid;
    grid-template-columns: 675px 365px;
    grid-template-areas:
        "top-txt image"
        "right-txt image";
    gap: 120px 69px;
}
#location-work .image-container{
    grid-area: image;
    height: 453px;
}
#location-work .image-container img{
    max-width: 100%;
    min-height: 100%;
}
#location-work .right-txt{
    grid-area: right-txt;
    padding-left: 173px;
}
#location-work .top-txt{
    grid-area: top-txt;
}
#location-work h2{
    margin-bottom: 50px;
}
#location-work .right-txt h2{
    color: var(--c-main);
    grid-area: h2;
}
#location-work .right-txt p{
    grid-area: text;
}
@container location-work (width < 1110px){
    #location-work .container{
        display: block;
        grid-template-columns: auto;
        grid-template-areas:
        "top-txt"
        "right-txt"
        "image";
        gap: 0;
    }
    #location-work .top-txt{
        margin-bottom: 50px;
    }
    #location-work .right-txt{
        padding-left: 0;
        margin-bottom: 35px;
    }
}
@container location-work (width < 690px){
    #location-work .image-container img{

    }
}


#were-live .wrapper{
    container-name: were-live;
    container-type: inline-size;
}
#were-live .container{
    display: grid;
    grid-template-columns: 568px 95px 445px;
    align-items: center;
    grid-template-areas:
        "h2 . image"
        "p . image";
}
#were-live h2{
    grid-area: h2;
}
#were-live p{
    grid-area: p;
}
#were-live .image-container{
    grid-area: image;
    height: 220px;
    overflow: hidden;
}
#were-live .image-container img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@container were-live (width < 1110px){
    #were-live .container{
        grid-template-columns: auto;
        align-items: center;
        grid-template-areas:
        "h2"
        "p"
        "image";
        gap: 50px;
    }
    #were-live .image-container{
        height: 250px;
    }
}

#video-building .wrapper{
    container-name: video-building;
    container-type: inline-size;
}
#video-building .container{
    padding-top: 0;
}
#video-building h2{
    margin-bottom: 50px;
}
@container video-building (width < 1110px){

}

#after-work h2{
    margin-bottom: 50px;
}
#after-work .note-txt{
    color: var(--c-main);
    font-size: var(--fs-24);
    line-height: var(--lh-130);
    margin: 50px 0;
}
#after-work .slider-block{
    margin-bottom: 50px;
}

#beyond-sports .wrapper{
    container-name: beyond-sports;
    container-type: inline-size;
}

#beyond-sports h2{
    margin-bottom: 20px;
}
#beyond-sports .slider-block{
    padding: 95px 0;
}
#beyond-sports .video-block{
    height: 482px;
    background: rgba(19, 20, 21, 0.30);
}
@container beyond-sports (width < 1110px){
    #beyond-sports .video-block{
        height: 300px;
    }
}
@container beyond-sports (width < 690px){
    #beyond-sports .video-block{
        height: 220px;
    }
}

#self-development h2{
    margin-bottom: 50px;
}
#self-development ul{
    margin: 30px 0;
    max-width: 730px;
    list-style: none;
}
#self-development ul li{
    font-size: 16px;
    font-weight: 400;
    line-height: 130%;
    border-bottom: 1px solid #D8D9DB;
    display: grid;
    grid-template-columns: 65px 1fr;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    padding: 10px 0;
}
#self-development ul li .icon{
    display: flex;
    width: 65px;
    height: 65px;
}
#self-development ul li .icon img{
    width: 100%;
}
#self-development .link-box{
    font-size: 16px;
    font-weight: 300;
    line-height: 130%;
}
#self-development .link-box a{
    color: var(--c-main);
}

#workplaces .wrapper{
    container-name: workplaces;
    container-type: inline-size;
}
#workplaces h2{
    margin-bottom: 50px;
}
#workplaces .workplaces-items-wrap{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px 30px;
}
#workplaces .workplaces-items-wrap .image{
    margin-bottom: 30px;
    height: 350px;
    overflow: hidden;
}
#workplaces .workplaces-items-wrap .image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#workplaces .workplaces-items-wrap .name{
    font-size: 16px;
    font-weight: 300;
    line-height: 130%;
}
@container workplaces (width < 1110px){
    #workplaces .workplaces-items-wrap{
        grid-template-columns: repeat(2, 1fr);
    }
}
@container workplaces (width < 690px){
    #workplaces .workplaces-items-wrap{
        grid-template-columns: auto;
    }
}

#company-video .wrapper{
    container-name: company-video;
    container-type: inline-size;
}
#company-video h2{
    margin-bottom: 50px;
}
#company-video .video-block{
    height: 482px;
    width: 100%;
    background: rgba(19, 20, 21, 0.45);
}
@container company-video (width < 1110px){
    #company-video .video-block{
        height: 300px;
    }
}