.about, .history, .team, .mission, .matches, .achievements, .partners, .gallery {
    padding: 140px 0;
    h2 {
        font-family: 'Oswald';
        font-size: 48px;
        font-weight: 700;
        line-height: 52px;
        letter-spacing: 0;
        text-transform: uppercase;
    }
}
.about {
    display: flex;
    flex-direction: column;
    gap: 96px;
    .content {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 96px;
        h2 {
            max-width: 480px;
        }
    }
    .text {
        display: flex;
        flex-direction: column;
        gap: 24px;
        p {
            font-size: 20px;
            line-height: 28px;
            letter-spacing: 0;
            color: var(--text-4);
        }
        .lead {
            font-size: 24px;
            line-height: 28px;
            font-weight: 300;
            color: var(--text-1);
        }
    }
}
.brand {
    padding: 80px 0;
    .word {
        height: 683px;
        margin-bottom: -343px;
        object-fit: fill;
        mask-image: linear-gradient(#000 33%, transparent 50%);
    }
}
.history, .mission {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
    gap: 140px;
}
.history {
    .info {
        display: flex;
        flex-direction: column;
        gap: 96px;
        img {
            aspect-ratio: 810 / 532;
        }
    }
    .text {
        display: flex;
        flex-direction: column;
        gap: 28px;
        &, * {
            font-size: 24px;
            line-height: 28px;
            font-weight: 300;
            letter-spacing: 0;
        }
    }
}
.mission p {
    font-size: 24px;
    line-height: 28px;
    font-weight: 300;
    letter-spacing: 0;
}
.team {
    h2 {
        margin-bottom: 96px;
    }
    .items {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        align-items: start;
        gap: 20px;
    }
    .staff {
        gap: 32px;
    }
    .subtitle {
        margin: 96px 0 64px;
        font-family: 'Oswald';
        font-size: 32px;
        font-weight: 700;
        line-height: 40px;
        letter-spacing: 0;
        text-transform: uppercase;
    }
    .member .bio {
        font-size: 20px;
        line-height: 28px;
    }
}
.last {
    align-items: flex-start;
    justify-content: flex-end;
    min-height: 670px;
    margin-top: 140px;
    padding-top: 96px;
    h2 {
        max-width: 1048px;
        text-align: left;
        font-size: 96px;
        line-height: 104px;
    }
}
.matches, .achievements, .gallery {
    .head {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: 40px;
        margin-bottom: 96px;
    }
}
.matches, .achievements, .partners {
    .info {
        display: flex;
        flex-direction: column;
        gap: 40px;
        p {
            max-width: 720px;
            font-size: 20px;
            line-height: 28px;
            letter-spacing: 0;
            color: var(--text-4);
        }
    }
}
.matches .head .button, .gallery .head .button {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    height: 60px;
    padding: 0 32px;
    border: 1.5px solid var(--border-4);
    border-radius: 999px;
    font-size: 20px;
    line-height: 24px;
    font-weight: 500;
    letter-spacing: 0;
    transition: border-color 0.3s, color 0.3s;
}
.matches {
    .items {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
    }
    .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        img {
            aspect-ratio: 565 / 722;
        }
        .button {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 76px;
            padding: 0 48px;
            border-radius: 999px;
            background: var(--bg-8);
            font-size: 24px;
            line-height: 28px;
            font-weight: 500;
            letter-spacing: 0;
            color: var(--text-5);
            transition: box-shadow 0.35s ease, transform 0.35s ease;
        }
    }
}
.achievements {
    .arrows {
        display: flex;
        gap: 16px;
        button {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 60px;
            height: 60px;
            border: 1.5px solid var(--border-4);
            border-radius: 50%;
            background: none;
            transition: border-color 0.3s;
            &::before {
                content: '\e013';
                font-family: 'icon';
                font-size: 16px;
                transform: rotate(45deg);
            }
            &.prev::before {
                transform: rotate(-135deg);
            }
        }
    }
    .items {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 474px;
        gap: 20px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        &::-webkit-scrollbar {
            display: none;
        }
    }
    .item {
        display: flex;
        flex-direction: column;
        gap: 24px;
        scroll-snap-align: start;
        img {
            height: 300px;
        }
        h3 {
            font-family: 'Oswald';
            font-size: 32px;
            font-weight: 600;
            line-height: 40px;
            letter-spacing: -0.5px;
        }
    }
}
.partners {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    .items {
        display: flex;
        flex-shrink: 0;
        gap: 20px;
    }
    .item {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 200px;
        height: 200px;
        img {
            max-height: 100%;
            object-fit: contain;
        }
    }
}
.gallery {
    .head {
        align-items: center;
    }
    .row {
        display: grid;
        grid-template-columns: 896fr 416fr 416fr;
        gap: 16px;
        & + .row {
            margin-top: 16px;
        }
        &:nth-child(odd) {
            grid-template-columns: 416fr 416fr 896fr;
        }
    }
    .item {
        position: relative;
        height: 463px;
        img {
            height: 100%;
        }
        &::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(transparent, color-mix(in srgb, var(--main-bg) 80%, transparent));
            pointer-events: none;
        }
    }
}
@media screen and (max-width: 1759px) {
    .about, .history, .team, .mission, .matches, .achievements, .partners, .gallery {
        padding: 120px 0;
    }
    .about {
        gap: 80px;
        .content {
            gap: 80px;
        }
        .text {
            p {
                font-size: 16px;
                line-height: 24px;
            }
            .lead {
                font-size: 18px;
            }
        }
        .facts {
            gap: 48px;
        }
    }
    .brand {
        padding: 64px 0;
        .word {
            height: 560px;
            margin-bottom: -280px;
        }
    }
    .history, .mission {
        gap: 120px;
    }
    .history .info {
        gap: 80px;
    }
    .history .text {
        &, * {
            font-size: 18px;
        }
    }
    .mission p {
        font-size: 18px;
    }
    .team {
        h2 {
            margin-bottom: 80px;
        }
        .staff {
            grid-template-columns: repeat(3, minmax(0, 500px));
        }
        .subtitle {
            margin: 80px 0 48px;
            font-size: 24px;
            line-height: 36px;
        }
        .member .bio {
            font-size: 16px;
            line-height: 24px;
        }
    }
    .last {
        margin-top: 120px;
        padding-top: 80px;
        h2 {
            max-width: none;
            font-size: 64px;
            line-height: 72px;
        }
    }
    .matches, .achievements, .gallery {
        .head {
            margin-bottom: 80px;
        }
    }
    .matches, .achievements, .partners {
        .info p {
            font-size: 16px;
            line-height: 24px;
        }
    }
    .achievements, .partners {
        .info {
            gap: 32px;
        }
    }
    .matches .head .button, .gallery .head .button {
        height: 56px;
        padding: 0 24px;
        font-size: 16px;
        line-height: 20px;
    }
    .matches .item .button {
        height: 68px;
        padding: 0 40px;
        font-size: 18px;
        line-height: 24px;
    }
    .achievements .item {
        gap: 20px;
        h3 {
            font-size: 28px;
            line-height: 36px;
        }
    }
    .partners .item {
        width: 180px;
        height: 180px;
    }
    .gallery {
        .row {
            grid-template-columns: 640fr 327.5fr 327.5fr;
            &:nth-child(odd) {
                grid-template-columns: 327.5fr 327.5fr 640fr;
            }
        }
        .item {
            height: 386px;
        }
    }
}
@media screen and (max-width: 1279px) {
    .about, .history, .team, .mission, .matches, .achievements, .partners, .gallery {
        padding: 100px 0;
        h2 {
            font-size: 40px;
            line-height: 44px;
        }
    }
    .about {
        gap: 60px;
        .content {
            gap: 60px;
        }
    }
    .history, .mission {
        gap: 60px;
    }
    .history .info {
        gap: 60px;
    }
    .team {
        h2 {
            margin-bottom: 60px;
        }
        .items, .staff {
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        }
        .subtitle {
            margin: 60px 0 40px;
        }
    }
    .last {
        margin-top: 100px;
        h2 {
            font-size: 64px;
            line-height: 68px;
        }
    }
    .matches, .achievements, .gallery {
        .head {
            margin-bottom: 60px;
        }
    }
    .matches .item .button {
        height: 56px;
        padding: 0 32px;
    }
    .partners {
        flex-direction: column;
        align-items: stretch;
    }
    .gallery .item {
        height: 300px;
    }
}
@media screen and (max-width: 767px) {
    .about, .history, .team, .mission, .matches, .achievements, .partners, .gallery {
        padding: 56px 0;
        h2 {
            font-size: 32px;
            line-height: 36px;
        }
    }
    .about {
        gap: 40px;
        .content {
            grid-template-columns: 1fr;
            gap: 40px;
        }
        .text {
            p {
                font-size: 14px;
                line-height: 24px;
            }
            .lead {
                font-size: 16px;
                line-height: 20px;
            }
        }
        .facts {
            gap: 20px;
        }
    }
    .brand {
        padding: 32px 0;
        .word {
            height: 200px;
            margin-bottom: -100px;
        }
    }
    .history, .mission {
        grid-template-columns: 1fr;
    }
    .history {
        gap: 56px;
        .info {
            gap: 40px;
        }
        .text {
            gap: 20px;
            &, * {
                font-size: 16px;
                line-height: 20px;
            }
        }
    }
    .mission {
        gap: 40px;
        p {
            font-size: 16px;
            line-height: 20px;
        }
    }
    .team {
        h2 {
            margin-bottom: 40px;
        }
        .items, .staff {
            grid-template-columns: 1fr;
        }
        .staff {
            gap: 32px;
        }
        .subtitle {
            margin: 40px 0 32px;
            font-size: 24px;
            line-height: 32px;
        }
        .member .bio {
            font-size: 14px;
            line-height: 24px;
        }
    }
    .last {
        justify-content: flex-end;
        min-height: 560px;
        margin-top: 56px;
        padding-bottom: 40px;
        h2 {
            font-size: 40px;
            line-height: 48px;
        }
    }
    .matches, .achievements, .gallery {
        .head {
            flex-direction: column;
            align-items: stretch;
            gap: 24px;
            margin-bottom: 40px;
        }
    }
    .matches, .achievements, .partners {
        .info {
            gap: 20px;
            p {
                font-size: 14px;
                line-height: 24px;
            }
        }
    }
    .matches .info {
        gap: 40px;
    }
    .matches .head .button, .gallery .head .button {
        height: 48px;
        padding: 0 20px;
        font-size: 16px;
        line-height: 20px;
    }
    .matches {
        .items {
            grid-template-columns: 1fr;
            gap: 48px;
        }
        .item .button {
            align-self: stretch;
            height: 48px;
            padding: 0 24px;
            font-size: 16px;
            line-height: 20px;
        }
    }
    .achievements {
        .head {
            gap: 20px;
        }
        .arrows button {
            align-self: flex-start;
        }
        .items {
            grid-auto-columns: 288px;
        }
        .item {
            gap: 16px;
            h3 {
                font-size: 24px;
                line-height: 32px;
            }
        }
    }
    .partners {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        .item {
            width: 100px;
            height: 100px;
        }
    }
    .gallery {
        .head {
            gap: 40px;
        }
        .row, .row:nth-child(odd) {
            grid-template-columns: 1fr;
        }
        .item {
            height: 129px;
        }
    }
}
body.reveal {
    .about h2, .about .text, .facts .item, .brand .word, .history h2, .history img, .history .text, .team h2, .team .member, .team .subtitle, .mission h2, .mission p, .matches .head, .matches .item, .achievements .head, .achievements .items, .partners .info, .partners .item, .gallery .head, .gallery .item {
        opacity: 0;
        translate: 0 40px;
        transition: opacity 0.8s ease var(--delay, 0s), translate 0.8s ease var(--delay, 0s);
        &.in {
            opacity: 1;
            translate: 0 0;
        }
    }
    .brand .word {
        translate: 0 120px;
        transition-duration: 1.4s;
    }
}
.gallery .item {
    overflow: hidden;
}
@media (hover: hover) {
    .matches .head .button:hover, .gallery .head .button:hover, .achievements .arrows button:hover {
        border-color: var(--bg-2);
        color: var(--text-2);
    }
    .matches .item .button:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 34px rgba(255, 107, 0, 0.35);
    }
    .gallery .item img {
        transition: scale 0.6s ease;
    }
    .gallery .item:hover img {
        scale: 1.05;
    }
}