@font-face {
    font-family: "Alternate Gothic ATF";
    src: url("assets/fonts/atf-alternate-gothic/Alternate Gothic ATF Regular.ttf") format("truetype");
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: "Alternate Gothic ATF";
    src: url("assets/fonts/atf-alternate-gothic/Alternate Gothic ATF Bold.ttf") format("truetype");
    font-weight: bold;
    font-display: swap;
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

dialog {
    margin: auto;
}

a,
input,
textarea,
select,
button,
h1,
h2,
h3,
h4,
h5,
h6 {
    font: inherit;
    color: inherit;
}

a {
    text-decoration: none;
}

img,
video,
iframe {
    display: block;
    inline-size: 100%;
    block-size: auto;
}

button,
label,
input {
    cursor: pointer;
}

input[type="reset"],
input[type="submit"],
button {
    border: none;
    background-color: transparent;
}

span:has(> svg:only-child),
svg {
    line-height: 0;
}

ul {
    list-style-type: none;
}

html {
    scroll-behavior: smooth;
    scroll-padding: 6.25rem;
    -webkit-tap-highlight-color: transparent;
}

body:has(dialog[open]) {
    overflow: hidden;
}

/* ======================================== */
/* UTILS */
/* ======================================== */

.rich-text strong {
    font-size: 1.875rem;
    font-weight: 700;
    text-transform: uppercase;
}

.sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.img-wrapper.img-wrapper-ratio > picture,
.img-wrapper.img-wrapper-ratio {
    overflow: hidden;
    position: relative;
}

.img-wrapper.img-wrapper-ratio > picture {
    block-size: 100%;
    display: block;
}

.img-wrapper.img-wrapper-ratio > video,
.img-wrapper.img-wrapper-ratio > picture > video,
.img-wrapper.img-wrapper-ratio > picture > img,
.img-wrapper.img-wrapper-ratio > img {
    inline-size: 100%;
    block-size: 100%;
    position: absolute;
    object-fit: cover;
    inset: 0;
}

.layers {
    display: grid;
}

.layers > .layer {
    grid-column: -1/1;
    grid-row: -1/1;
}

.layers > .layer.layer-bg {
    position: relative;
}

.layers > .layer.layer-bg > .img-wrapper.img-wrapper-ratio:only-child {
    block-size: 100%;
}

.layers > .layer.layer-bg::before,
.layers > .layer.layer-bg::after {
    content: "";
    pointer-events: none;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: 100%;
    position: absolute;
}

.layers > .layer.layer-fg {
    position: relative;
    z-index: 1;
}

:root {
    --container-columns: 12;
    --container-gap: 1.875rem;
    --container-column-width: 5.3125rem;
    --container-x-padding: 2rem;
}

.container {
    inline-size: 100%;
    max-inline-size: calc((var(--container-x-padding) * 2) + ((var(--container-columns) - 1) * var(--container-gap)) + (var(--container-columns) * var(--container-column-width)));
    margin-inline: auto;
    padding-inline: var(--container-x-padding);
}
.container.container-10 {
    --container-columns: 10;
}
.container.container-8 {
    --container-columns: 8;
}
.container.container-6 {
    --container-columns: 6;
}
.container.container-5 {
    --container-columns: 5;
}
.container.container-4 {
    --container-columns: 4;
}

@media (max-width: 900px) {
    :root {
        --container-x-padding: 1.25rem;
    }
}

@media (min-width: 900px) {
    .only-mobile {
        display: none;
    }
}

@media (max-width: 900px) {
    .only-desktop {
        display: none;
    }
}

/* ======================================== */
/* THEME */
/* ======================================== */

:root {
    --c-blue: #00a0e6;
    --c-pink: #df3faf;
    --header-height: 3.75rem;
    --ff-primary: "Alternate Gothic ATF", sans-serif;

    --arrow-height: 3.125rem;
}

html {
    font-family: var(--ff-primary);
}

[data-theme="light"] {
    --surface: white;
    --on-surface: black;
    --accent: var(--c-pink);

    color: var(--on-surface);
    background-color: var(--surface);
}

[data-theme="dark"] {
    --surface: black;
    --on-surface: white;
    --accent: var(--c-pink);

    color: var(--on-surface);
    background-color: var(--surface);
}

[data-theme="orange"] {
    --surface: #ff6934;
    --on-surface: black;
    --accent: var(--c-pink);

    color: var(--on-surface);
    background-color: var(--surface);
}

[data-theme="blue"] {
    --surface: var(--c-blue);
    --on-surface: black;
    --accent: var(--c-pink);

    color: var(--on-surface);
    background-color: var(--surface);
}

[data-theme="accent"] {
    --surface: var(--c-pink);
    --on-surface: black;
    --accent: white;

    color: var(--on-surface);
    background-color: var(--surface);
}

.color-accent {
    color: var(--accent);
}

.fs-76 {
    font-size: 4.75rem;
    line-height: 1;
    font-weight: 700;
}

.fs-64 {
    font-size: 4rem;
    line-height: 0.9375;
    text-transform: uppercase;
    font-weight: 700;
}

.fs-40 {
    font-size: 2.5rem;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
}

.fs-24 {
    font-size: 1.5rem;
    line-height: 1.216667;
    font-weight: 400;
}

@media (max-width: 900px) {
    .fs-76 {
        font-size: 3.5rem;
    }

    .fs-64 {
        font-size: 3rem;
        line-height: 1;
    }

    .fs-40 {
        font-size: 2rem;
    }

    .fs-24 {
        font-size: 1.125rem;
        line-height: 1.5;
    }
}

:focus-visible {
    outline-offset: 4px;
    outline: 0px solid var(--on-surface);
    animation:
        focus-ring-in 0.2s forwards,
        focus-ring-out 0.2s 0.2s forwards;
}

@keyframes focus-ring-in {
    to {
        outline-width: 8px;
    }
}

@keyframes focus-ring-out {
    to {
        outline-width: 4px;
    }
}

/* ======================================== */
/* BUTTONS */
/* ======================================== */

.btn.btn-primary {
    font-size: 1.875rem;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
    padding-block: 0.875rem;
    padding-inline: 2.1875rem;
    border: 0.5rem solid currentColor;
    display: inline-block;
}

.btn.btn-primary:where(:hover, :focus-visible) {
    background-color: black;
    color: white;
    border-color: black;
}

/* ======================================== */
/* HASHTAG */
/* ======================================== */

.hashtag svg {
    inline-size: 100%;
    block-size: auto;
}

/* ======================================== */
/* ARROWS */
/* ======================================== */

[data-arrow] {
    position: relative;
}

[data-arrow]::after {
    content: "";
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 7.6875rem;
    inline-size: 5rem;
    block-size: 5rem;
    background-color: var(--surface);
    transform: translateY(-50%) rotate(45deg);
    z-index: 1;
}

[data-arrow="right"]::after {
    inset-inline-start: auto;
    inset-inline-end: 7.6875rem;
}

@media (max-width: 768px) {
    [data-arrow]::after {
        inline-size: 2rem;
        block-size: 2rem;
        inset-inline-start: var(--container-x-padding);
    }

    [data-arrow="right"]::after {
        inset-inline-start: auto;
        inset-inline-end: var(--container-x-padding);
    }
}

/* ======================================== */
/* HEADER */
/* ======================================== */

header {
    position: relative;
    z-index: 99999;
    block-size: var(--header-height);
}

header a {
    display: grid;
    place-items: center;
    position: fixed;
    z-index: 2;
    inset-inline-end: 0;
    inset-block-start: 0;
    inline-size: var(--header-height);
    block-size: var(--header-height);
}

header a svg {
    transform: 4px;
}

header .flag {
    inline-size: 8.125rem;
    position: absolute;
    inset-inline-end: 0;
    inset-block-start: var(--header-height);
}

header .flag span {
    display: block;
    block-size: 2rem;
}

header .flag :nth-child(1) {
    background-color: #e63428;
}
header .flag :nth-child(2) {
    background-color: #ed6b1d;
}
header .flag :nth-child(3) {
    background-color: #fdc403;
}
header .flag :nth-child(4) {
    background-color: #014c96;
}
header .flag :nth-child(5) {
    background-color: #239dd9;
}

@media (max-width: 900px) {
    header .flag {
        display: flex;
        inline-size: 100%;
    }

    header .flag span {
        flex-grow: 1;
    }
}

/* ======================================== */
/* HERO TEXT */
/* ======================================== */

section.hero.hero-text {
    /* min-block-size: calc(100vh - var(--header-height)); */
    /* min-block-size: calc(100svh - var(--header-height)); */
    display: grid;
    align-items: center;
    position: relative;
}

.audio-toggle {
    position: absolute;
    top: 2rem;
    left: 2rem;
    z-index: 10;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: white;
}

.audio-toggle:hover {
    background: rgba(0, 0, 0, 0.7);
    transform: scale(1.1);
}

.audio-toggle:active {
    transform: scale(0.95);
}

@media (max-width: 900px) {
    .audio-toggle {
        top: 1rem;
        left: 1rem;
        width: 2.5rem;
        height: 2.5rem;
    }

    .audio-toggle svg {
        width: 20px;
        height: 20px;
    }
}

section.hero.hero-text video {
    position: static;
    inline-size: 100%;
    inset: 0;
    block-size: 100%;
    object-fit: contain;
    z-index: 2;
}

@media (max-width: 900px) {
    section.hero.hero-text video.hero-desktop {
        display: none;
    }
}

@media (min-width: 900px) {
    section.hero.hero-text video.hero-mobile {
        display: none;
    }
}

section.hero.hero-text .container {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

section.hero.hero-text .title {
    text-transform: uppercase;
    text-wrap: balance;
}

section.hero.hero-text .hashtag {
    max-inline-size: 34rem;
    margin-inline-start: auto;
}

@media (max-width: 900px) {
    section.hero.hero-text .hashtag {
        max-inline-size: 60vw;
    }

    section.hero.hero-text .title {
        font-size: 2.5rem;
    }
}

/* ======================================== */
/* SIDE REVEAL */
/* ======================================== */

section.side-reveal {
    --_y-padding: var(--header-height);
    display: grid;
    grid-template-columns: minmax(16.25rem, 22.5rem) 1fr;
    overflow: hidden;
    padding-block-start: var(--_y-padding);
    padding-block-end: 0;
}

section.side-reveal .column {
    display: grid;
    justify-items: center;
    position: relative;
    block-size: calc(100vh - (2 * var(--_y-padding)));
}

section.side-reveal .column .down {
    position: sticky;
    top: calc(50vh - 4rem);
    display: flex;
    writing-mode: tb;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1.5rem;
}

section.side-reveal .column svg {
}

section.side-reveal .content-wrapper {
    display: grid;
}

section.side-reveal .content {
    grid-area: 1/1;
    position: sticky;
    inset-block-start: 0;
    block-size: calc(100vh - (2 * var(--_y-padding)));
    overflow: hidden;
}

section.side-reveal .content-collab {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

section.side-reveal .content-collab .container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 3.5625rem;
    justify-content: center;
}

section.side-reveal .content-collab .collaboration {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    max-inline-size: 15.125rem;
    font-size: 1.25rem;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
}

section.side-reveal .collaboration .img-wrapper {
    inline-size: 4.3125rem;
    flex-shrink: 0;
}

section.side-reveal .content-collab .title-wrapper {
    position: relative;
}

section.side-reveal .content-collab .date {
    background-color: transparent;
    position: absolute;
    inset-block-end: calc(100% + 0.625rem);
    inset-inline-start: 55%;
}

section.side-reveal .content-collab .date p {
    background-color: var(--surface);
    font-size: 1.875rem;
    line-height: 1;
    text-transform: uppercase;
    font-weight: 700;
    padding-block: 0.53125rem;
    padding-inline: 1.875rem;
    border-radius: 0.25rem;
    inline-size: fit-content;
    justify-self: end;
}

section.side-reveal .content-collab .date::after {
    content: "";
    position: absolute;
    inline-size: 1.5rem;
    block-size: 1.375rem;
    background-color: var(--surface);
    inset-block-start: calc(100% - 0.8125rem);
    inset-inline-start: 0.875rem;
    clip-path: polygon(0% 0%, 100% 0%, 0% 100%, 0 100%, 0% 0%);
}

section.side-reveal .content-collab .text * {
    line-height: 0;
}

section.side-reveal .content-collab .text svg {
    inline-size: 100%;
    height: auto;
    translate: 0 9%;
    max-inline-size: 64.25rem;
    max-inline-size: min(64.25rem, 100% - 4rem);
    margin-inline: auto;
    display: block;
}

section.side-reveal .content-quote {
    display: grid;
    place-items: center;
    z-index: 99;
    inset-block-start: 0;
    block-size: 100vh;
    translate: 0 calc(-1 * var(--header-height));
}

section.side-reveal .content-quote p + p {
    margin-block-start: 1lh;
}

section.side-reveal .content-quote .quote {
    position: relative;
}

section.side-reveal .content-quote .openquote {
    position: absolute;
    inset-block-start: -1.0625rem;
    inset-inline-start: -11rem;
}

section.side-reveal .content-quote .closequote {
    position: absolute;
    inset-block-end: -1.0625rem;
    inset-inline-end: -11rem;
}

section.side-reveal .content-quote :is(.openquote, .closequote) {
    scale: 0.95;
}

@media (max-width: 900px) {
    section.side-reveal {
        display: block;
    }

    section.side-reveal .column {
        display: none;
    }

    section.side-reveal .content-quote .quote {
        font-size: 2.5rem;
    }

    section.side-reveal .content-collab .title {
        font-size: 2.5rem;
    }

    section.side-reveal .content-collab .title span {
        line-height: 0;
    }

    section.side-reveal .content-collab .title svg {
        line-height: 0;
        block-size: 0.8em;
        inline-size: auto;
    }

    section.side-reveal .content-collab .date p {
        font-size: 1.2rem;
        padding-inline: 1rem;
    }

    section.side-reveal .content-collab .date::after {
        block-size: 1rem;
        inset-block-start: calc(100% - 0.5rem);
    }

    section.side-reveal .content-quote .openquote {
        inset-block-start: -4rem;
        inset-inline-start: 0;
        inline-size: fit-content;
        block-size: fit-content;
    }

    section.side-reveal .content-quote .closequote {
        inset-block-end: -4rem;
        inset-inline-start: auto;
        inset-inline-end: 0;
        inline-size: fit-content;
        block-size: fit-content;
    }

    section.side-reveal .content-quote :is(.openquote, .closequote) svg {
        inline-size: 3.125rem;
        block-size: 3.125rem;
    }

    section.side-reveal .contents .arrow {
        position: absolute;
        inset-block-end: 11rem;
        inset-inline-start: 50%;
        z-index: 999;
        inline-size: 3rem;
        block-size: 3rem;
        background: white;
        border-radius: 50%;
        translate: -50%;
    }
}

/* ======================================== */
/* BASIC SPLIT */
/* ======================================== */

section.basic-split .container {
    padding-block: 10rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--container-gap);
}

section.basic-split .titles-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

section.basic-split .titles-wrapper svg {
    display: block;
    margin-inline-start: auto;
    max-inline-size: 24.1875rem;
    color: var(--accent);
}

section.basic-split .texts {
    display: flex;
    flex-direction: column;
    max-inline-size: 26.875rem;
    margin-inline-start: auto;
}

section.basic-split .texts .title {
    display: flex;
    align-items: start;
    gap: 1.25rem;
}

section.basic-split .texts .title svg {
    inline-size: 3.125rem;
    block-size: auto;
}

section.basic-split .texts .title + .text {
    margin-block-start: 1.25rem;
}

section.basic-split .texts .title span {
    margin-block-start: 0.625rem;
}

section.basic-split .texts .btn {
    margin-inline-start: auto;
    margin-block-start: 3.125rem;
}

@media (max-width: 900px) {
    section.basic-split .container {
        padding-block: 3.125rem;
        display: flex;
        flex-direction: column;
        gap: 3.125rem;
    }

    section.basic-split .titles-wrapper {
        gap: 2rem;
    }
}

/* ======================================== */
/* TITLE SEPARATOR */
/* ======================================== */

section.title-separator {
    padding-block: 5rem;
}

section.title-separator .title {
    max-inline-size: 48.4375rem;
}

section.title-separator .container:has(svg) {
    display: flex;
    align-items: center;
    gap: 1.875rem;
}

section.title-separator svg {
    max-inline-size: 21.4375rem;
}

section.title-separator .hashtag {
    block-size: 1lh;
    position: relative;
}

section.title-separator .hashtag svg {
    line-height: inherit;
    translate: 0 calc(0.5lh - 50%);
}

@media (max-width: 768px) {
    section.title-separator {
        padding-block: 3.125rem;
    }

    section.title-separator .container:has(svg) {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        text-wrap: balance;
    }

    section.title-separator .hashtag,
    section.title-separator .hashtag svg {
        line-height: normal;
        translate: unset;
        block-size: unset;
        max-inline-size: unset;
    }
}

/* ======================================== */
/* ALT SPLIT */
/* ======================================== */

section.alt-split .container {
    padding-block: 8.125rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--container-gap);
}

section.alt-split .titles-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    max-inline-size: 26.375rem;
}

section.alt-split .title {
    text-transform: none;
}

section.alt-split .texts {
    display: flex;
    flex-direction: column;
}

section.alt-split .texts .text-wrapper {
    display: flex;
    align-items: start;
    gap: 1.875rem;
}

section.alt-split .texts .text-wrapper svg {
    flex-shrink: 0;
    inline-size: 3.125rem;
    block-size: auto;
}

section.alt-split .texts .btn {
    margin-inline-start: auto;
    margin-block-start: 3.125rem;
}

@media (max-width: 900px) {
    section.alt-split .container {
        padding-block: 3.125rem;
        display: flex;
        flex-direction: column;
    }

    section.alt-split .texts .text-wrapper svg {
        display: none;
    }

    section.alt-split .texts .text-wrapper {
        text-wrap: balance;
    }
}

/* ======================================== */
/* BOXES */
/* ======================================== */

section.boxes {
    padding-block: 5rem 5rem;
}

:where([data-arrow]) + section.boxes {
    padding-block-start: calc(5rem + var(--arrow-height));
}

section.boxes .text {
    max-inline-size: 55.625rem;
}

section.boxes .collaboration {
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    max-inline-size: 15.125rem;
    font-size: 1.25rem;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
}

section.boxes .img-wrapper {
    max-inline-size: 4.3125rem;
}

section.boxes ul {
    display: grid;
    --grid-item-width: 25.75rem;
    grid-template-columns: repeat(auto-fit, minmax(var(--grid-item-width), 1fr));
    grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-item-width), 100%), 1fr));
    gap: var(--container-gap);
    font-size: 2.625rem;
    line-height: 1;
    font-weight: 700;
    color: var(--c-blue);
    align-items: center;
    grid-auto-rows: 17.875rem;
}

section.boxes ul li {
    block-size: 100%;
    display: grid;
    align-items: center;
    position: relative;
}

section.boxes ul li span {
    display: block;
    max-inline-size: 18.4375rem;
    inline-size: 100%;
    margin-inline: auto;
    position: relative;
    z-index: 1;
}

section.boxes ul li::before,
section.boxes ul li::after {
    --_angle: 10%;
    content: "";
    position: absolute;
    inset: 0;
    border: 12px solid var(--c-blue);
}

section.boxes ul li::before {
    clip-path: polygon(0% 0%, calc(50% + var(--_angle)) 00%, calc(50% - var(--_angle)) 100%, 0% 100%);
    rotate: -4deg;
    translate: -2px -8px;
}

section.boxes ul li::after {
    rotate: -4deg;
    clip-path: polygon(calc(50% + var(--_angle)) 0%, calc(50% - var(--_angle)) 100%, 100% 100%, 100% 0%);
    translate: 2px 8px;
}

section.boxes .content {
    display: flex;
    flex-direction: column;
    gap: 5rem;
}

@media (max-width: 900px) {
    section.boxes {
        padding-block: 3.125rem;
    }

    section.boxes .content {
        gap: 3.125rem;
    }

    section.boxes ul {
        grid-auto-rows: auto;
        gap: 3rem;
    }

    section.boxes li {
        padding-inline: 2rem;
        padding-block: 3rem;
    }

    section.boxes ul li span {
        max-inline-size: unset;
        font-size: 2rem;
    }
}

/* ======================================== */
/* SIMPLE SEPARATOR */
/* ======================================== */

section.simple-separator {
    block-size: 5rem;
}

/* ======================================== */
/* BASIC TITLE */
/* ======================================== */

section.basic-title {
    padding-block: calc(6.25rem + var(--arrow-height)) 6.25rem;
}

section.basic-title .container {
    display: flex;
    align-items: end;
}

section.basic-title .title {
    max-inline-size: 48.4375rem;
}

section.basic-title .logo {
    max-inline-size: 24.1875rem;
    margin-inline-start: -6rem;
    margin-block-end: 2rem;
}

@media (max-width: 900px) {
    section.basic-title {
        padding-block: 3.125rem;
    }

    section.basic-title .container {
        display: flex;
        flex-direction: column;
        gap: 3.125rem;
    }

    section.basic-title .logo {
        margin-inline-start: 0;
        margin-block-end: 0;
    }
}

/* ======================================== */
/* SPONSORS */
/* ======================================== */

section.sponsors {
    padding-block: 5rem;
}

section.sponsors .title {
    font-weight: 700;
    font-size: 1.875rem;
    line-height: 1.133333;
    text-transform: uppercase;
    margin-block-end: 2.5rem;
}

section.sponsors .items {
    display: grid;
    --grid-item-width: 17.5rem;
    grid-template-columns: repeat(auto-fit, minmax(var(--grid-item-width), 1fr));
    grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-item-width), 100%), 1fr));
    gap: var(--container-gap);
}

section.sponsors li {
    block-size: 5rem;
    display: grid;
    place-items: center;
}

section.sponsors li:not(:has(svg)) {
    background-color: rgb(255 255 255 / 0.3);
    text-transform: uppercase;
}

@media (max-width: 900px) {
    section.sponsors {
        padding-block: 3.125rem;
    }

    section.sponsors .title {
        margin-block-end: 2rem;
    }

    section.sponsors .items {
        gap: 1rem;
    }

    section.sponsors li:not(:has(svg)) {
        font-size: 1.875rem;
    }
}

/* ======================================== */
/* FINAL */
/* ======================================== */

section.final {
    background-image: linear-gradient(to right, transparent 50%, #f2f2f2 50%);
}

section.final .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--container-gap);
    padding-block: 7.1875rem;
}

section.final .text .text-wrapper {
    max-inline-size: 26.875rem;
    inline-size: 100%;
    margin-inline: auto;
}

section.final .text .title {
    margin-block-end: 2.75rem;
}

section.final .text .btn {
    margin-block-start: 3.125rem;
}

section.final .img-wrapper {
    display: grid;
    place-items: center;
}

section.final .img-wrapper img {
    max-inline-size: 31.8125rem;
    margin-inline: auto;
}

@media (max-width: 900px) {
    section.final {
        background-image: none;
    }

    section.final .container {
        padding-block: 3.125rem;
        display: flex;
        flex-direction: column;
        gap: 6.25rem;
    }

    section.final .text .title {
        margin-block-end: 2rem;
    }

    section.final .text .btn {
        margin-block-start: 2rem;
    }

    section.final .img-wrapper {
        position: relative;
    }

    section.final .img-wrapper::after {
        content: "";
        position: absolute;
        background-color: #f2f2f2;
        z-index: -1;
        inset-inline-start: calc(-1 * var(--container-x-padding));
        inline-size: calc(100% + (2 * var(--container-x-padding)));
        block-size: calc(100% + 6.25rem);
        inset-block-start: -3.125rem;
    }
}

/* ======================================== */
/* FOOTER */
/* ======================================== */

footer {
    padding-block: 3rem;
    display: grid;
    place-items: center;
}

@media (max-width: 900px) {
    footer {
        padding-block: 1.5rem;
    }

    footer svg {
        block-size: 2.125rem;
    }
}