/*
  Theme Name: Maccaferri
  Author: Egloo
  Author URI: https://egloo.it
  Version: 1.0.1
*/

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

/* Ofelia Text Light */
@font-face {
    font-family: "Ofelia Text";
    src: url("assets/fonts/Ofelia Text Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* Ofelia Text Regular */
@font-face {
    font-family: "Ofelia Text";
    src: url("assets/fonts/Ofelia Text Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Ofelia Text Medium */
@font-face {
    font-family: "Ofelia Text";
    src: url("assets/fonts/Ofelia Text Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Ofelia Text Semibold */
@font-face {
    font-family: "Ofelia Text";
    src: url("assets/fonts/Ofelia Text Semibold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

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

a {
    text-decoration: none;
}

img,
video,
iframe {
    display: block;
    width: 100%;
    height: auto;
}

button,
label,
input {
    cursor: pointer;
}

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

svg {
    line-height: 0;
}

.hidden {
    display: none !important;
}

@media only screen and (max-width: 768px) {
    .only-desktop {
        display: none !important;
    }
}

@media only screen and (min-width: 768px) {
    .only-mobile {
        display: none !important;
    }
}

.layers {
    display: grid;
}

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

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

@view-transition {
    navigation: auto;
}

::view-transition-old(root-not-working) {
    animation:
        old-scale 0.3s ease-out forwards,
        old-slide 1s ease-in forwards 0.6s;
}

::view-transition-new(root-not-working) {
    scale: 0.3;
    translate: -100vw;
    animation:
        new-slide 1s ease-out forwards 1s,
        new-scale 0.3s ease-out forwards 2s;
}

@keyframes old-scale {
    from {
        scale: 1;
    }
    to {
        scale: 0.3;
    }
}

@keyframes new-scale {
    from {
        scale: 0.3;
    }
    to {
        scale: 1;
    }
}

@keyframes old-slide {
    from {
        translate: 0vw;
    }
    to {
        translate: 100vw;
    }
}

@keyframes new-slide {
    from {
        translate: -100vw;
    }
    to {
        translate: 0vw;
    }
}

:root {
    --container-columns: 12;
    --container-gap: 1.25rem;
    --container-column-width: 6.125rem;
    --container-x-padding: 1rem;

    --c-black: #03131a;
    --c-white: #fff;
    --c-blue: #1a414e;
    --c-acquamarine: #78d3cf;
    --c-green: #264d50;
}

.container {
    width: 100%;
    max-width: 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-4 {
    --container-columns: 4;
}

.img-wrapper.img-wrapper-ratio {
    position: relative;
    height: 0;
}

.img-wrapper.img-wrapper-ratio > iframe,
.img-wrapper.img-wrapper-ratio > video,
.img-wrapper.img-wrapper-ratio > img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

ul {
    list-style-type: none;
}

body {
    color: var(--c-black);
    font-family: "ofelia text", sytem-ui;
}

html:has(#menu[open]),
body:has(#menu[open]) {
    overflow: hidden;
    touch-action: none;
}

html {
    -webkit-tap-highlight-color: transparent;
    margin-top: 0 !important;
    scroll-behavior: smooth;
}

.rich-text p:not(:last-child) {
    margin-bottom: 1lh;
}

.rich-text strong {
    font-weight: 500;
}

.rich-text ul {
    padding-left: 1.8125rem;
    font-size: 1rem;
    line-height: 1.5625rem;
    font-weight: 500;
    list-style-type: none;
    display: grid;
    gap: 1.25rem;
}

.rich-text ul li {
    position: relative;
}

.rich-text ul li::after {
    content: "";
    height: 0.5625rem;
    width: 0.5625rem;
    background-color: var(--c-acquamarine);
    border-radius: 6.1875rem;
    position: absolute;
    top: 0.5rem;
    left: -1.25rem;
    transform: translateX(-100%);
}

.fs-title-big {
    font-size: 6.25rem;
    line-height: 1;
}

.fs-title-1 {
    font-size: 4.375rem;
    line-height: 114.286%;
}

.fs-title-2 {
    font-size: 3.125rem;
    line-height: 1.2;
}

.fs-title-3 {
    font-size: 2.5rem;
    line-height: 1.25;
}

.fs-title-4 {
    font-size: 1.875rem;
    line-height: 1.333333;
}

.fs-title-5 {
    font-size: 1.5625rem;
    line-height: 2rem;
}

.fs-body-large {
    font-size: 1.125rem;
    line-height: 1.388889;
}

.fs-body-medium {
    font-size: 1rem;
    line-height: 1.5625rem;
}

.fs-body-small {
    font-size: 0.875rem;
    line-height: 1.714286;
}

.fs-label {
    font-size: 0.8125rem;
    line-height: 1.384615;
}

@media only screen and (max-width: 768px) {
    .fs-title-big {
        font-size: 5rem;
        line-height: 1.25;
    }

    .fs-title-1 {
        font-size: 2.625rem;
        line-height: 1.190476;
    }

    .fs-title-2 {
        font-size: 2.1875rem;
        line-height: 1.285714;
    }

    .fs-title-3 {
        font-size: 2.1875rem;
        line-height: 1.285714;
    }

    .fs-title-4 {
        font-size: 1.5625rem;
        line-height: 1.4;
    }

    .fs-title-5 {
        font-size: 1.25rem;
        line-height: 1.4;
    }

    .fs-body-large {
        font-size: 1.125rem;
        line-height: 1.388889;
    }

    .fs-body-medium {
        font-size: 1rem;
        line-height: 1.5625rem;
    }

    .fs-body-small {
        font-size: 0.875rem;
        line-height: 1.714286;
    }

    .fs-label {
        font-size: 0.8125rem;
        line-height: 1.384615;
    }
}

.btn.btn-primary {
    position: relative;
    padding: 0.9375rem 1.875rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 0.625rem;
    border-radius: 9999px;
    background-color: var(--c-blue);
    font-size: 0.8125rem;
    font-style: normal;
    font-weight: 500;
    line-height: 138.462%;
    color: var(--c-white);
    overflow: hidden;
    transition: color 0.3s ease;
}

.btn.btn-primary.btn-outline {
    background-color: transparent;
    color: var(--c-blue);
    border: 1px solid var(--c-blue);
}

.btn.btn-primary.btn-outline.light {
    background-color: transparent;
    color: var(--c-white);
    border: 1px solid var(--c-white);
}

.btn.btn-primary.btn-outline:where(:focus-visible, :hover) {
    background-color: var(--c-blue);
    color: var(--c-white);
}

.btn.btn-primary.btn-outline:where(:focus-visible) {
    outline: 1px solid var(--c-blue);
}

.btn.btn-primary.btn-outline::after {
    content: initial;
}

.btn.btn-primary span {
    position: relative;
    z-index: 1;
}

.btn.btn-primary::after {
    content: "";
    background-color: var(--c-acquamarine);
    position: absolute;
    border-radius: 999px;
    width: 200%;
    aspect-ratio: 1/1;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    transition: top 0.3s ease;
}

.btn.btn-primary:where(:hover, :focus-visible) {
    color: var(--c-black);
}

.btn.btn-primary:where(:hover, :focus-visible)::after {
    top: -150%;
}

.btn.btn-gear {
    position: relative;
    --_outline-offset: 0.625rem;
    --_circle-diameter: 9.25rem;
    height: var(--_circle-diameter);
    width: var(--_circle-diameter);
    border-radius: 999px;
    display: grid;
    place-items: center;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.8125rem;
    font-weight: 500;
    border: 1px solid currentColor;
    outline: 1px dashed currentColor;
    outline-offset: var(--_outline-offset);
    background-color: rgb(from var(--c-black) r g b / 0.7);
    backdrop-filter: blur(5px);
    transition:
        width 0.3s ease,
        height 0.3s ease,
        outline-offset 0.3s ease,
        transform 0.3s ease,
        background-color 0.3s ease;
}

.btn.btn-gear:where(:focus-visible) {
    --_outline-offset: 1.625rem;
    --_circle-diameter: 8.25rem;
}

.btn.btn-gear.no-bg {
    background-color: transparent;
}

.btn.btn-gear span {
    max-width: 5.375rem;
    margin-inline: auto;
    transition: transform 0.3s ease;
}

.btn.btn-gear::after,
.btn.btn-gear::before {
    content: "";
    position: absolute;
    background-color: currentColor;
    transition: all 0.3s ease;
}

.btn.btn-gear::after {
    width: 1px;
    height: calc(var(--_circle-diameter) + (2 * var(--_outline-offset)));
    left: 50%;
    top: calc((-1 * var(--_outline-offset)) - 1px);
    transform: translateX(-50%);
    mask-image: linear-gradient(to bottom, black var(--_outline-offset), transparent var(--_outline-offset), transparent calc(var(--_outline-offset) + var(--_circle-diameter) - 1px), black calc(var(--_outline-offset) + var(--_circle-diameter) - 1px));
}

.btn.btn-gear::before {
    height: 1px;
    width: calc(var(--_circle-diameter) + (2 * var(--_outline-offset)));
    left: calc((-1 * var(--_outline-offset)) - 1px);
    top: 50%;
    transform: translateY(-50%);
    mask-image: linear-gradient(to right, black var(--_outline-offset), transparent var(--_outline-offset), transparent calc(var(--_outline-offset) + var(--_circle-diameter) - 1px), black calc(var(--_outline-offset) + var(--_circle-diameter) - 1px));
}

.btn.btn-gear:where(:hover, :focus-visible) {
    background-color: rgb(120 211 207 / 0.1);
    transform: rotate(11.5deg);
}

.btn.btn-gear.no-bg:where(:hover, :focus-visible) {
    background-color: rgb(from var(--c-acquamarine) r g b / 0.2);
}

.btn.btn-gear:where(:hover, :focus-visible) span {
    transform: rotate(-11.5deg);
}

.btn.btn-direction {
    word-break: keep-all;
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.btn.btn-direction .btn-direction-text {
    font-weight: 500;
    line-height: 1.384615;
    font-size: 0.8125rem;
    text-transform: uppercase;
}

.btn.btn-direction .btn-direction-text:empty {
    display: none;
}

.btn.btn-direction .btn-direction-icon {
    height: 2.8125rem;
    width: 2.8125rem;
    display: grid;
    place-items: center;
    background-color: rgb(from currentColor r g b / 0.1);
    backdrop-filter: blur(20px);
    transition: color 0.3s ease;
    flex-shrink: 0;
    border-radius: 99px;
    position: relative;
    overflow: hidden;
}

.btn.btn-direction .btn-direction-icon svg {
    position: relative;
    z-index: 1;
}

.btn.btn-direction .btn-direction-icon::after {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: var(--c-acquamarine);
    top: 0;
    left: 0;
    border-radius: 9999px;
    transition: transform 0.3s ease;
    transform: translateX(100%);
}

.btn.btn-direction:where(:hover, :focus-visible) .btn-direction-icon {
    color: var(--c-black);
}

.btn.btn-direction[data-direction="bottom"] {
    flex-direction: column;
}

.btn.btn-direction[data-direction="bottom"] .btn-direction-icon {
    transform: rotate(90deg);
}

.btn.btn-direction[data-direction]:where(:hover, :focus-visible) .btn-direction-icon::after,
.btn.btn-direction:where(:hover, :focus-visible) .btn-direction-icon::after {
    transform: translateX(0) translateY(0);
}

.rotating-icon {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    gap: 1.6875rem;
}

.rotating-icon .icon {
    --_outline-offset: 0.6875rem;
    height: 5.375rem;
    width: 5.375rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background-color: rgb(from var(--c-acquamarine) r g b / 0.1);
    outline: 1px dashed var(--c-acquamarine);
    outline-offset: calc(var(--_outline-offset) - 1.5px);
    position: relative;
}

.rotating-icon .icon::after {
    content: "";
    position: absolute;
    top: calc(-1 * var(--_outline-offset));
    left: calc(-1 * var(--_outline-offset));
    width: calc(100% + (2 * var(--_outline-offset)));
    height: calc(100% + (2 * var(--_outline-offset)));
    outline: 2px solid var(--c-acquamarine);
    border-radius: 99px;
    outline-offset: -2px;
    mask-image: conic-gradient(from 180deg at 50% 50%, black 18.0000002682209deg, transparent 18.29807013273239deg, transparent 161.99999570846558deg, black 161.99999570846558deg, black 198.00000429153442deg, transparent 198.00000429153442deg, transparent 340.7786250114441deg, black 341.9999957084656deg);
    transform: rotate(var(--_ring-rotation, 0deg));
}

.rotating-icon .icon img {
    max-width: 2.6875rem;
}

.rotating-icon p {
    font-weight: 500;
    text-wrap: balance;
    max-width: 95%;
    color: var(--c-blue);
}

input:where([type="text"], [type="email"]) {
    width: 100%;
    background-color: rgb(from var(--c-white) r g b / 0.1);
    background-color: rgb(from currentColor r g b / 0.1);
    border-radius: 0.625rem;
    font-size: 1rem;
    line-height: 1.125;
    padding-block: 1.3125rem;
    padding-inline: 2rem;
    border: none;
}

input:where([type="submit"]) {
    padding: 0.9375rem;
    border: 1px solid currentColor;
    font-size: 0.8125rem;
    line-height: 1.384615;
    font-weight: 500;
    border-radius: 999px;
}

input:where([type="submit"]):hover {
    background-color: var(--c-white);
    color: var(--c-blue);
}

input:where([type="checkbox"]) {
    appearance: none;
    height: 0.8125rem;
    width: 0.8125rem;
    border: none;
    background-color: #d9d9d9;
    border-radius: 2px;
}

input:where([type="checkbox"]):checked {
    background-color: var(--c-acquamarine);
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNoZWNrLWljb24gbHVjaWRlLWNoZWNrIj48cGF0aCBkPSJNMjAgNiA5IDE3bC01LTUiLz48L3N2Zz4=);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;
}

/* ============================ */
/* BREADCRUMB */
/* ============================ */

#breadcrumbs {
    word-break: keep-all;
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.8125rem;
    line-height: 1.384615;
    font-weight: 500;
    position: relative;
}

#breadcrumbs > svg {
    position: absolute;
    left: -10px;
    top: 0;
}

#breadcrumbs li {
    display: flex;
    align-items: center;
}

#breadcrumbs li a {
    max-width: 15ch;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

#breadcrumbs li:nth-last-child(2) {
    opacity: 0.5;
}

#breadcrumbs li:nth-last-child(2) svg {
    display: none;
}

#breadcrumbs li svg {
    transform: translateY(0.5px);
}

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

header {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    width: 100%;
}

header::after {
    content: "";
    position: absolute;
    height: 40vh;
    width: 100%;
    top: 0;
    left: 0;
    background-image: linear-gradient(to bottom, rgb(from var(--c-black) r g b / 0.6), transparent);
    pointer-events: none;
}

header::before {
    content: "";
    position: fixed;
    pointer-events: none;
    height: 100%;
    width: 100%;
    background-color: rgb(from var(--c-black) r g b / 0);
    backdrop-filter: blur(0px);
    transition:
        background-color 0.3s ease,
        backdrop-filter 0.3s ease;
}

:has(#menu[open]) header::before {
    background-color: rgb(from var(--c-black) r g b / 0.35);
    backdrop-filter: blur(15px);
}

header .header-bar {
    position: relative;
    z-index: 1;
    color: var(--c-white);
}

header .header-bar .container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--container-gap);
    align-items: start;
}

header .header-bar .right,
header .header-bar .left {
    padding-top: 2.375rem;
}

header .header-bar .left {
    grid-column: 1;
    justify-self: start;
}

header .header-bar .center {
    grid-column: 2;
    justify-self: center;
}

header .header-bar .center .logo {
    max-width: 15rem;
}

header .header-bar .right {
    grid-column: 3;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 2.125rem;
}

header .header-bar .right #menu-opener {
    height: 3.75rem;
    width: 3.75rem;
    border-radius: 6.1875rem;
    background-color: var(--c-blue);
    display: grid;
    place-items: center;
}

@media only screen and (max-width: 768px) {
    header .header-bar .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    header .header-bar .left {
        display: none;
    }

    header .header-bar .center .logo {
        max-width: 11.0625rem;
        margin-left: calc(-1 * var(--container-x-padding));
    }

    header .header-bar .right {
        padding-top: 0;
    }
}

/* ============================ */
/* HERO HOME */
/* ============================ */

section.hero.hero-home {
    color: var(--c-white);
    position: relative;
}

section.hero.hero-home::after {
    z-index: 0;
    pointer-events: none;
    content: "";
    position: absolute;
    bottom: 0;
    height: 10.9375rem;
    background-image: linear-gradient(transparent, var(--c-blue));
    width: 100%;
}

section.hero.hero-home .layers {
    min-block-size: 100vh;
    min-block-size: 100svh;
}

section.hero.hero-home .layers .layer-bg .img-wrapper {
    block-size: 100%;
}

section.hero.hero-home .layers .layer-fg {
    z-index: 1;
}

section.hero.hero-home .layers .layer-fg .container {
    block-size: 100%;
}

section.hero.hero-home .layers .layer-fg .container .content-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
}

section.hero.hero-home .layers .layer-fg .container .content-wrapper .bottom {
    margin-top: auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "link title controls";
    gap: 1rem;
    padding-bottom: 1.875rem;
    align-items: end;
}

section.hero.hero-home .layers .layer-fg .container .content-wrapper .bottom > .link {
    grid-area: link;
}

section.hero.hero-home .layers .layer-fg .container .content-wrapper .bottom .title-wrapper {
    grid-area: title;
    max-width: 34.8125rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.56rem;
}

section.hero.hero-home .layers .layer-fg .container .content-wrapper .bottom .title-wrapper .title {
    font-weight: 350;
}

section.hero.hero-home .layers .layer-fg .container .content-wrapper .bottom .video-controls {
    justify-self: end;
    grid-area: controls;
    display: flex;
    gap: 1.25rem;
    align-items: center;
}

section.hero.hero-home .layers .layer-fg .container .content-wrapper .bottom .video-controls button {
    border-radius: 50%;
    width: 2.8125rem;
    height: 2.8125rem;
    flex-shrink: 0;
    aspect-ratio: 1/1;
    outline: 1px solid rgb(255 255 255 / 0.15);
    outline-offset: -1px;
    display: grid;
    place-items: center;
    line-height: 0;
}

section.hero.hero-home .layers .layer-fg .container .content-wrapper .bottom .video-controls button .icon {
    line-height: 0;
}

section.hero.hero-home .layers .layer-fg .container .content-wrapper .bottom .video-controls button .icon:not(.active) {
    display: none;
}

@media only screen and (max-width: 768px) {
    section.hero.hero-home .layers .layer-fg .container .content-wrapper .bottom {
        margin-top: 0;
        height: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr auto 1fr;
        padding-block: 7.4375rem;
    }

    section.hero.hero-home .layers .layer-fg .container .content-wrapper .bottom .only-mobile.btn-direction {
        width: fit-content;
        grid-row: 3;
    }

    section.hero.hero-home .layers .layer-fg .container .content-wrapper .bottom .title-wrapper {
        max-width: none;
        grid-row: 2;
        order: -1;
        grid-column: -1/1;
    }

    section.hero.hero-home .layers .layer-fg .container .content-wrapper .bottom .video-controls {
        grid-row: 3;
        display: flex;
        flex-direction: column;
        margin-left: auto;
    }
}

/* ============================ */
/* BUBBLES */
/* ============================ */

section.bubbles {
    padding-block: 14.0625rem;
    color: var(--c-white);
    background-image: linear-gradient(to bottom, var(--c-blue), var(--c-black));
    overflow: hidden;
}

section.bubbles .container {
    position: relative;
}

section.bubbles .container .bubble {
    --_ball-size: 12.25rem;
    position: absolute;
    aspect-ratio: 1/1;
    height: var(--_ball-size);
    width: var(--_ball-size);
}

section.bubbles .container .bubble:nth-child(1) {
    --_ball-size: 12.25rem;
    top: -10.8125rem;
    left: 35rem;
}

section.bubbles .container .bubble:nth-child(2) {
    --_ball-size: 17.9375rem;
    left: -23.625rem;
    top: 4.5625rem;
}

section.bubbles .container .bubble:nth-child(3) {
    --_ball-size: 10.875rem;
    left: 25.375rem;
    top: 22.25rem;
}

section.bubbles .wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5.625rem;
}

section.bubbles .wrapper .featured-bubble {
    width: 100%;
}

section.bubbles .wrapper .featured-bubble .img-wrapper {
    width: 100%;
    max-width: 12.4375rem;
    aspect-ratio: 1/1;
    border-radius: 99px;
    overflow: hidden;
    height: auto;
    margin-inline: auto;
}

section.bubbles .wrapper .description {
    text-align: center;
}

@media only screen and (max-width: 768px) {
    section.bubbles .container .bubble {
        display: none;
    }

    section.bubbles {
        padding-top: 7.875rem;
        padding-bottom: 3.125rem;
    }

    section.bubbles .wrapper {
        gap: 0;
    }

    section.bubbles .wrapper .featured-bubble {
        margin-top: 3.125rem;
        margin-bottom: 3.75rem;
    }

    section.bubbles .wrapper .link {
        margin-top: 4.375rem;
    }
}

/* ============================ */
/* FORCED SLIDER */
/* ============================ */

section.forced-slider {
    background-color: var(--c-black);
    color: var(--c-white);
    padding-top: 11.9375rem;
    padding-bottom: 9.375rem;
    overflow: hidden;
}

section.forced-slider .title-wrapper {
    display: grid;
    grid-template-columns: 2fr 8fr;
    align-items: center;
    gap: var(--container-gap);
    margin-bottom: 5.8125rem;
}

section.forced-slider .title-wrapper .section-title {
    color: var(--c-acquamarine);
    text-transform: uppercase;
    font-weight: 500;
    position: relative;
}

section.forced-slider .title-wrapper .section-title svg {
    position: absolute;
    top: 2.1875rem;
    left: -11.0625rem;
}

section.forced-slider .title-wrapper .title {
    text-transform: uppercase;
}

section.forced-slider .description-wrapper {
    display: grid;
    grid-template-columns: 6fr [description-start] 3fr [description-end] 1fr;
    gap: var(--container-gap);
}

section.forced-slider .description-wrapper .description {
    grid-column: description;
}

section.forced-slider .cards-wrapper .swiper {
    overflow: visible;
}

section.forced-slider .cards-wrapper .swiper .swiper-wrapper {
    align-items: end;
}

section.forced-slider.not-swiper .cards-wrapper {
    display: flex;
    gap: 1.25rem;
    align-items: end;
}

section.forced-slider .cards-wrapper .card {
    width: 28.375rem;
    border-radius: 0.5rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-shrink: 0;
}

section.forced-slider .cards-wrapper .card .layers {
    height: 26.5rem;
}

section.forced-slider .cards-wrapper .card .layers .layer-bg .img-wrapper {
    height: 100%;
}

section.forced-slider .cards-wrapper .card .layers .layer-fg {
    background-color: rgb(0 0 0 / 0.2);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2.5rem;
    padding-bottom: 1.875rem;
}

section.forced-slider .cards-wrapper .card .layers .layer-fg .top .description {
    font-weight: 500;
    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

section.forced-slider .cards-wrapper .card:not(:hover) .layers .layer-fg .top .description {
    opacity: 0;
    transform: translateY(10px);
}

section.forced-slider .cards-wrapper .card .layers .layer-fg .bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

section.forced-slider .cards-wrapper .card .layers .layer-fg .bottom .title {
    font-weight: 500;
}

section.forced-slider .cards-wrapper .card .layers .layer-fg .bottom .link a::after {
    content: "";
    position: absolute;
    inset: 0;
}

section.forced-slider .cards-wrapper .card:first-child {
    width: 43.125rem;
    mask-image: url("assets/img/folder-card.svg");
    mask-repeat: no-repeat;
    mask-size: 100%;
}

section.forced-slider .cards-wrapper .card:first-child .layers {
    height: 32.4375rem;
}

section.forced-slider .cards-wrapper .card:first-child .layers .layer-fg .top .description {
    max-width: 25.25rem;
}

section.forced-slider .cards-wrapper .card .layers .layer-fg .bottom .btn-direction .btn-direction-text {
    transition: opacity 0.3s ease;
}

section.forced-slider .cards-wrapper .card:not(:hover) .layers .layer-fg .bottom .btn-direction .btn-direction-text {
    opacity: 0;
}

@media only screen and (max-width: 768px) {
    section.forced-slider {
        padding-top: 3.125rem;
        padding-bottom: 3.125rem;
    }

    section.forced-slider .title-wrapper {
        display: flex;
        flex-direction: column;
        gap: 7.25rem;
        margin-bottom: 3.125rem;
    }

    section.forced-slider .title-wrapper .section-title {
        width: 100%;
        text-align: start;
    }

    section.forced-slider .title-wrapper .section-title svg {
        top: -1.875rem;
        left: -8.5625rem;
    }

    section.forced-slider .description-wrapper {
        display: block;
        margin-bottom: 5.9375rem;
    }

    section.forced-slider .cards-container .cards-wrapper {
        padding-inline: var(--container-x-padding);
        overflow: auto;
        margin-inline: calc(-1 * var(--container-x-padding));
        width: calc(100% + (2 * var(--container-x-padding)));
    }

    section.forced-slider .cards-container .cards-wrapper::-webkit-scrollbar {
        display: none;
    }

    section.forced-slider.not-swiper .cards-wrapper,
    section.forced-slider .cards-wrapper,
    section.forced-slider .cards-wrapper .swiper .swiper-wrapper {
        align-items: start;
    }

    section.forced-slider .cards-wrapper .card:first-child,
    section.forced-slider .cards-wrapper .card {
        width: 80%;
        mask-image: none;
    }

    section.forced-slider .cards-wrapper .card:first-child .layers,
    section.forced-slider .cards-wrapper .card .layers {
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 1.5625rem;
    }

    section.forced-slider .cards-wrapper .card:not(:first-child) {
        margin-top: 7.5%;
    }

    section.forced-slider .cards-wrapper .card:first-child .layers .layer-bg .img-wrapper {
        aspect-ratio: 295/252;
        border-radius: 0.625rem;
        mask-image: url("assets/img/folder-card-mobile.svg");
        mask-repeat: no-repeat;
        mask-size: 100%;
    }

    section.forced-slider .cards-wrapper .card .layers .layer-bg .img-wrapper {
        overflow: hidden;
        border-radius: 0.625rem;
        aspect-ratio: 295/224;
    }

    section.forced-slider .cards-wrapper .card .layers .layer-fg {
        background-color: transparent;
        padding: 0;
        gap: 1rem;
        display: flex;
        flex-direction: column;
    }

    section.forced-slider .cards-wrapper .card .layers .layer-fg .bottom {
        order: -1;
    }

    section.forced-slider .cards-wrapper .card .layers .layer-fg .bottom .btn-direction .btn-direction-icon {
        height: 2.1875rem;
        width: 2.1875rem;
    }

    section.forced-slider .cards-wrapper .card .layers .layer-fg .bottom .btn-direction .btn-direction-text {
        display: none;
    }

    section.forced-slider .cards-wrapper .card:not(:hover) .layers .layer-fg .top .description,
    section.forced-slider .cards-wrapper .card .layers .layer-fg .top .description {
        opacity: 1;
        transform: none;
    }

    section.forced-slider .cards-wrapper .card .layers .layer-fg .top .description {
        font-weight: 400;
    }
}

/* ============================ */
/* IMAGE WITH LINK */
/* ============================ */

section.image-with-link {
    overflow: hidden;
    background-color: var(--c-black);
    color: var(--c-white);
    padding-top: 7.125rem;
    padding-bottom: 8.625rem;
}

section.image-with-link .wrapper .section-title {
    text-transform: uppercase;
    color: var(--c-acquamarine);
    position: relative;
    font-weight: 500;
    text-align: center;
}

section.image-with-link .wrapper .section-title svg {
    position: absolute;
    top: -0.8125rem;
    left: 50%;
    transform: translateX(-50%);
}

section.image-with-link .wrapper .text-wrapper {
    margin-top: 3.875rem;
    margin-bottom: 4.1875rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--container-gap);
}

section.image-with-link .wrapper .text-wrapper .title {
    font-weight: 300;
    padding-top: 4.875rem;
    text-transform: uppercase;
    text-align: end;
}

section.image-with-link .wrapper .text-wrapper .description {
    padding-left: 10.0625rem;
}

section.image-with-link .wrapper .cta-container {
    max-width: 31.3125rem;
    margin-inline: auto;
    position: relative;
}

section.image-with-link .wrapper .cta-container .img-wrapper {
    border-radius: 0.375rem;
    overflow: hidden;
}

section.image-with-link .wrapper .cta-container .link {
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translateX(50%) translateY(50%);
}

@media only screen and (max-width: 768px) {
    section.image-with-link {
        padding-top: 6.25rem;
        padding-bottom: 9.375rem;
        overflow: visible;
        position: relative;
        z-index: 1;
    }

    section.image-with-link .wrapper .section-title {
        text-align: left;
    }

    section.image-with-link .wrapper .text-wrapper {
        display: flex;
        flex-direction: column;
        gap: 3.125rem;
        margin-top: 6.5625rem;
        margin-bottom: 3.125rem;
    }

    section.image-with-link .wrapper .text-wrapper .title {
        text-align: start;
        padding-top: 0;
    }

    section.image-with-link .wrapper .text-wrapper .description {
        padding-left: 0;
    }

    section.image-with-link .wrapper .cta-container .link {
        transform: translateX(-50%) translateY(80%);
        right: auto;
        left: 50%;
    }

    section.image-with-link .wrapper .section-title svg {
        width: 100%;
        top: -2.4375rem;
        left: -1.25rem;
        transform: translateX(0);
    }
}

/* ============================ */
/* TEXT ON TOP */
/* ============================ */

section.text-on-top {
    overflow: hidden;
    --_ball-size: 0.5625rem;
    background-color: var(--c-black);
    color: var(--c-white);
}

section.text-on-top .layers {
    min-height: 100vh;
}

section.text-on-top .layers .layer-bg .img-wrapper {
    height: 100%;
}

section.text-on-top .layers .layer-fg {
    background-image: linear-gradient(to bottom, var(--c-black) 35%, transparent);
}

section.text-on-top .layers .layer-fg .container {
    height: 100%;
    padding-top: 6.25rem;
    position: relative;
}

section.text-on-top .layers .layer-fg .container::before {
    content: "";
    position: absolute;
    top: 0;
    left: calc((var(--_ball-size) / 2) + var(--container-x-padding));
    height: 100%;
    border-left: 1px dashed white;
    mask-image: linear-gradient(to bottom, transparent, black, transparent);
}

section.text-on-top .layers .layer-fg .texts-wrapper {
    gap: var(--container-gap);
    display: flex;
    align-items: start;
    justify-content: space-between;
}

section.text-on-top .layers .layer-fg .texts-wrapper .left {
    --_left-padding: 1.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.9375rem;
    padding-left: var(--_left-padding);
    max-width: 25.625rem;
}

section.text-on-top .layers .layer-fg .texts-wrapper .left .section-title {
    text-transform: uppercase;
    font-weight: 500;
    position: relative;
}

section.text-on-top .layers .layer-fg .texts-wrapper .left .section-title::after {
    content: "";
    position: absolute;
    height: var(--_ball-size);
    width: var(--_ball-size);
    background-color: currentColor;
    border-radius: 99px;
    left: calc(-1 * (var(--_left-padding)));
    top: calc(1cap - (var(--_ball-size) / 2));
}

section.text-on-top .layers .layer-fg .texts-wrapper .left .section-title .title {
    text-transform: uppercase;
}

section.text-on-top .layers .layer-fg .texts-wrapper .right {
    max-width: 20.9375rem;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    padding-top: 3.25rem;
}

@media only screen and (max-width: 768px) {
    section.text-on-top .layers .layer-fg .container {
        padding-top: 6.375rem;
    }

    section.text-on-top .layers .layer-fg .texts-wrapper {
        display: flex;
        flex-direction: column;
        gap: 2.5rem;
    }

    section.text-on-top .layers .layer-fg .texts-wrapper .left {
        padding-left: 0;
        gap: 4.6875rem;
    }

    section.text-on-top .layers .layer-fg .texts-wrapper .left .section-title svg {
        position: absolute;
        width: 100%;
        top: -2.4375rem;
        left: -1.25rem;
    }

    section.text-on-top .layers .layer-fg .container::before,
    section.text-on-top .layers .layer-fg .texts-wrapper .left .section-title::after {
        content: initial;
    }

    section.text-on-top .layers .layer-fg .texts-wrapper .right {
        padding-top: 0;
        gap: 2.5rem;
        max-width: none;
    }
}

/* ============================ */
/* VERTICAL SLIDER */
/* ============================ */

section.vertical-slider {
    padding-top: 8.6875rem;
    padding-bottom: 9.625rem;
    background-color: var(--c-blue);
    background-color: color-mix(in hsl, var(--c-blue), black 20%);
    color: var(--c-white);
    overflow: hidden;
}

section.vertical-slider .container {
    display: flex;
    flex-direction: column;
    gap: 5.0625rem;
}

section.vertical-slider .top .title {
    text-align: end;
    text-transform: uppercase;
    font-weight: 400;
    max-width: 57.8125rem;
    text-wrap: balance;
    margin-left: auto;
}

section.vertical-slider[data-centered-title="true"] .top .title {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

section.vertical-slider .slider-container {
    display: grid;
    grid-template-columns: minmax(auto, 1fr) minmax(0, 405px) minmax(auto, 1fr);
    grid-template-rows: auto 4.5625rem 1fr;
    column-gap: var(--container-gap);
    grid-template-areas:
        "empty1 slider empty2"
        "controls slider empty3"
        "controls slider empty4";
}

section.vertical-slider .slider-container .controls-wrapper {
    padding-left: 1.1875rem;
    grid-area: controls;
}

section.vertical-slider .slider-container .controls-wrapper .slider-controls {
    display: flex;
    flex-direction: column;
    gap: 1.375rem;
    width: fit-content;
    text-align: center;
    position: relative;
}

section.vertical-slider .slider-container .controls-wrapper .slider-controls svg.line-path {
    position: absolute;
    top: 2.375rem;
    left: -11.125rem;
}

section.vertical-slider .slider-container .controls-wrapper .slider-controls button {
    width: 2.8125rem;
    height: 2.8125rem;
    border: 1px solid rgb(255 255 255 / 0.15);
    display: grid;
    place-items: center;
    border-radius: 99px;
    transition: all 0.15s ease;
}

section.vertical-slider .slider-container .controls-wrapper .slider-controls button:hover {
    background-color: rgb(255 255 255 / 0.15);
}

section.vertical-slider .slider-container .controls-wrapper .slider-controls button:active {
    scale: 0.95;
}

section.vertical-slider .slider-container .controls-wrapper .slider-controls button:disabled {
    opacity: 0.4;
    pointer-events: none;
}

section.vertical-slider .slider-container .controls-wrapper .slider-controls button.prev-btn {
    transform: rotate(-90deg);
}

section.vertical-slider .slider-container .controls-wrapper .slider-controls button.next-btn {
    transform: rotate(90deg);
}

section.vertical-slider .slider-container .controls-wrapper .slider-controls .count {
    font-weight: 500;
}

section.vertical-slider .slider-container .controls-wrapper .slider-controls .total-count {
    color: var(--c-acquamarine);
    opacity: 0.2;
}

section.vertical-slider .slider-container .slider-content {
    grid-area: slider;
    max-width: 25.3125rem;
    margin-inline: auto;
    display: grid;
    grid-template-rows: subgrid;
}

section.vertical-slider .slider-container .slider-content .single-slide {
    position: relative;
    grid-area: slider;
    display: grid;
    grid-template-rows: subgrid;
    transition: opacity 0.3s ease;
}

section.vertical-slider .slider-container .slider-content .single-slide[inert] {
    opacity: 0;
}

section.vertical-slider .slider-container .slider-content .single-slide .date {
    padding-left: var(--container-gap);
    position: absolute;
    width: max-content;
    grid-area: 2/2;
    grid-row: 2/2;
    display: grid;
    align-items: center;
    height: 100%;
    font-weight: 500;
    color: var(--c-acquamarine);
}

section.vertical-slider .slider-container .slider-content .single-slide .cta {
    position: absolute;
    grid-column: 2;
    grid-row: 3 / 3;
    height: 100%;
    display: flex;
    padding-left: var(--container-gap);
    align-items: end;
    width: max-content;
}

section.vertical-slider .slider-container .slider-content .single-slide .top-wrapper {
    align-self: end;
    display: flex;
    flex-direction: column;
    gap: 1.375rem;
}

section.vertical-slider .slider-container .slider-content .single-slide .top-wrapper .state {
    display: flex;
    align-items: center;
    font-size: 0.625rem;
    line-height: 1.6;
    color: var(--c-acquamarine);
    text-transform: uppercase;
    font-weight: 500;
    gap: 0.625rem;
}

section.vertical-slider .slider-container .slider-content .single-slide .top-wrapper .state .circle {
    border-radius: 99px;
    height: 0.625rem;
    width: 0.625rem;
    background-color: currentColor;
}

section.vertical-slider .slider-container .slider-content .single-slide .title {
    font-weight: 500;
}

section.vertical-slider .slider-container .slider-content .single-slide .title a::before {
    content: "";
    position: absolute;
    inset: 0;
}

section.vertical-slider .slider-container .slider-content .single-slide .bottom-wrapper {
    height: fit-content;
    grid-row: 3;
    display: grid;
    gap: 2.375rem;
}

section.vertical-slider .slider-container .slider-content .single-slide .bottom-wrapper .description {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

section.vertical-slider .slider-container .slider-content .single-slide .bottom-wrapper .img-wrapper {
    border-radius: 0.375rem;
    overflow: hidden;
}

section.vertical-slider .slider-container .slider-content .single-slide .bottom-wrapper .img-wrapper img {
    height: 100%;
    object-fit: cover;
}

@media only screen and (max-width: 768px) {
    section.vertical-slider {
        padding-block: 6.25rem;
    }

    section.vertical-slider .top .title {
        text-align: start;
    }

    section.vertical-slider .container {
        gap: 4.6875rem;
    }

    section.vertical-slider .slider-container {
        display: flex;
        flex-direction: column;
    }

    section.vertical-slider .slider-container .controls-wrapper {
        padding-left: 0;
    }

    section.vertical-slider .slider-container .controls-wrapper .slider-controls {
        --_gap: 2.5rem;
        display: grid;
        grid-template-columns: 1fr auto auto 1fr;
        align-items: center;
        width: 100%;
        gap: var(--_gap);
    }

    section.vertical-slider .slider-container .controls-wrapper .slider-controls .current-count {
        position: relative;
    }

    section.vertical-slider .slider-container .controls-wrapper .slider-controls .current-count::after {
        content: "";
        position: absolute;
        top: 50%;
        right: calc((var(--_gap) / 2) * -1 - 2px);
        height: 1.8125rem;
        width: 0.0625rem;
        background-color: var(--c-acquamarine);
        transform: translateY(-50%);
    }

    section.vertical-slider .slider-container .controls-wrapper .slider-controls button.prev-btn {
        transform: rotate(-180deg);
    }

    section.vertical-slider .slider-container .controls-wrapper .slider-controls button.next-btn {
        justify-self: end;
        transform: rotate(0deg);
    }

    section.vertical-slider .slider-container .slider-content {
        margin-top: 6.5rem;
        align-items: start;
    }

    section.vertical-slider .slider-container .slider-content .single-slide {
        display: flex;
        flex-direction: column;
        gap: 1.875rem;
    }

    section.vertical-slider .slider-container .slider-content .single-slide .top-wrapper {
        gap: 4.0625rem;
        align-self: stretch;
    }

    section.vertical-slider .slider-container .slider-content .single-slide .cta,
    section.vertical-slider .slider-container .slider-content .single-slide .date {
        position: static;
        padding-left: 0;
    }

    section.vertical-slider .slider-container .slider-content .single-slide .top-wrapper .state {
        margin-left: 5.3125rem;
    }

    section.vertical-slider .slider-container .slider-content .single-slide .top-wrapper .state svg {
        position: absolute;
        top: -29px;
        left: -23px;
    }

    section.vertical-slider .slider-container .slider-content .single-slide .top-wrapper .state .circle {
        display: none;
    }
}

/* ============================ */
/* BIG TEXT */
/* ============================ */

section.big-text {
    overflow: hidden;
    color: var(--c-blue);
    padding-top: 9.25rem;
    padding-bottom: 6.375rem;
    /* background-color: #f5f5f5; */
    background-image: url("assets/img/logo-bg-img.svg");
    background-size: 62.5rem 48.0625rem;
    background-position: calc(100% + 31.25rem) center;
    background-repeat: no-repeat;
}

section.big-text .section-title {
    position: relative;
    text-align: center;
    font-weight: 500;
    text-transform: uppercase;
    width: fit-content;
    margin-inline: auto;
}

section.big-text .section-title svg {
    position: absolute;
    top: 0.5rem;
    left: -24.1875rem;
}

section.big-text .section-title + .title {
    margin-top: 9.5625rem;
}

section.big-text .title {
    text-transform: uppercase;
    font-weight: 350;
    text-align: center;
}

section.big-text .title + .description-container {
    margin-top: 3.875rem;
}

section.big-text .description-container {
    max-width: 58rem;
    margin-bottom: 3.5625rem;
    margin-inline: auto;
}

section.big-text .description-container .description {
    max-width: 28.125rem;
    font-weight: 500;
}

section.big-text .cta-wrapper {
    max-width: 41.125rem;
    margin-inline: auto;
    position: relative;
}

section.big-text .cta-wrapper .img-wrapper {
    border-radius: 0.625rem;
    overflow: hidden;
    margin-inline: auto;
    height: auto;
}

section.big-text .cta-wrapper .img-wrapper img {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

section.big-text .cta-wrapper .cta {
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translateX(50%) translateY(50%);
}

@media only screen and (max-width: 768px) {
    section.big-text {
        padding-top: 8.6875rem;
        padding-bottom: 8.9375rem;
    }

    section.big-text .section-title {
        width: auto;
        max-width: none;
        margin-inline: 0;
    }

    section.big-text .section-title h2 {
        max-width: 8.25rem;
    }

    section.big-text .section-title svg {
        top: -39px;
        left: -20px;
    }

    section.big-text .title {
        font-size: 2.625rem;
        line-height: 1.190476;
    }

    section.big-text .section-title + .title {
        text-align: left;
        margin-top: 6.25rem;
    }

    section.big-text .title + .description-container {
        margin-top: 3.125rem;
    }

    section.big-text .description-container {
        margin-bottom: 3.75rem;
    }

    section.big-text .cta-wrapper .cta {
        bottom: -120px;
        right: 21px;
        transform: none;
    }
}

/* ============================ */
/* SIMPLE SLIDER */
/* ============================ */

section.simple-slider {
    padding-top: 8.3125rem;
    padding-bottom: 7.4375rem;
    overflow: hidden;
}

section.simple-slider .section-title {
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 1.875rem;
    margin-inline: auto;
    width: fit-content;
    color: var(--c-blue);
    position: relative;
}

section.simple-slider .section-title svg {
    position: absolute;
    top: -0.75rem;
    left: -18.3125rem;
}

section.simple-slider .text-wrapper {
    display: flex;
    justify-content: space-between;
    gap: var(--container-gap);
    margin-bottom: 6.8125rem;
}

section.simple-slider .text-wrapper .title {
    padding-top: 4.375rem;
    max-width: 37rem;
    font-weight: 400;
    color: var(--c-green);
}

section.simple-slider .text-wrapper .title strong {
    font-weight: 500;
}

section.simple-slider .text-wrapper .description {
    max-width: 28rem;
}

section.simple-slider .swiper {
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 5.3125rem;
}

section.simple-slider .swiper .controls {
    display: flex;
    align-items: center;
    gap: 6rem;
}

section.simple-slider .swiper .controls:has(.swiper-scrollbar-lock) {
    display: none;
}

section.simple-slider .swiper .controls .swiper-scrollbar {
    --swiper-scrollbar-size: 1px;
    --swiper-scrollbar-drag-size: 5px;
    --swiper-scrollbar-dash-size: 5px;
    --swiper-scrollbar-color: var(--c-blue);
    flex-grow: 1;
    position: static;
    background-color: transparent;
    background-image: repeating-linear-gradient(to right, transparent, transparent var(--swiper-scrollbar-dash-size), var(--swiper-scrollbar-color) var(--swiper-scrollbar-dash-size), var(--swiper-scrollbar-color) calc(2 * var(--swiper-scrollbar-dash-size)));
}

section.simple-slider .swiper .controls .swiper-scrollbar .swiper-scrollbar-drag::after {
    content: "";
    position: absolute;
    left: 0;
    border-radius: 99px;
    top: calc(100% - (var(--swiper-scrollbar-size) / 2) - (var(--swiper-scrollbar-drag-size) / 2));
    background: var(--swiper-scrollbar-color);
    width: 100%;
    height: var(--swiper-scrollbar-drag-size);
    cursor: ew-resize;
}

section.simple-slider .swiper .controls .btn {
    flex-shrink: 0;
    color: var(--c-blue);
}

section.simple-slider .swiper .swiper-wrapper .swiper-slide {
    width: fit-content !important;
}

section.simple-slider[data-card="web-serie"] .swiper .swiper-wrapper .swiper-slide {
    width: 23.375rem !important;
}

section.simple-slider[data-card="partner"] .swiper .swiper-wrapper .swiper-slide .img-wrapper {
    display: grid;
    place-items: center;
    width: 11.25rem;
    padding: 1.75rem;
}

section.simple-slider[data-card="media"] .swiper .swiper-wrapper .swiper-slide .img-wrapper {
    height: 23.75rem;
    border-radius: 0.375rem;
    overflow: hidden;
}

section.simple-slider#boat-slider {
    background-image: linear-gradient(to bottom, var(--c-blue), var(--c-black));
    color: var(--c-white);
}

section.simple-slider#boat-slider .section-title {
    color: var(--c-acquamarine);
}

section.simple-slider#boat-slider .swiper .controls .swiper-scrollbar {
    --swiper-scrollbar-color: var(--c-acquamarine);
}

section.simple-slider#boat-slider .text-wrapper {
    margin-top: 8.4375rem;
}

section.simple-slider#boat-slider .text-wrapper .title {
    color: var(--c-white);
    padding-top: 0;
}

section.simple-slider#single-web-serie {
    padding-top: 11.125rem;
    padding-bottom: 0;
}

section.simple-slider#single-web-serie .text-wrapper .title {
    font-size: 1.875rem;
    line-height: 1.333333;
    font-weight: 500;
    color: var(--c-white);
    padding-top: 0;
}

section.simple-slider#taxonomy-serie .text-wrapper {
    display: none;
}

section.simple-slider#taxonomy-serie {
    padding-top: 0;
    padding-bottom: 11.1875rem;
}

@media only screen and (max-width: 768px) {
    section.simple-slider {
        padding-top: 5.8125rem;
        padding-bottom: 6.25rem;
    }

    section.simple-slider .section-title {
        margin-bottom: 5rem;
        margin-inline: 0;
    }

    section.simple-slider .section-title svg {
        left: -20px;
        top: -39px;
    }

    section.simple-slider .text-wrapper {
        display: grid;
        gap: 2.5rem;
        margin-bottom: 3.75rem;
    }

    section.simple-slider .text-wrapper .title {
        padding-top: 0;
    }

    section.simple-slider[data-card="partner"] .swiper .swiper-wrapper .swiper-slide .img-wrapper {
        padding: 0.625rem;
        width: 8.75rem;
    }

    section.simple-slider[data-card="media"] .swiper .swiper-wrapper .swiper-slide .img-wrapper {
        height: 20rem;
    }

    section.simple-slider .swiper {
        gap: 4.5625rem;
    }

    section.simple-slider .swiper .controls {
        display: grid;
        gap: 5rem;
    }

    section.simple-slider#boat-slider {
        padding-bottom: 5.1875rem;
    }

    section.simple-slider#boat-slider .text-wrapper {
        gap: 3.125rem;
        margin-top: 4.6875rem;
        margin-bottom: 4.375rem;
    }

    section.simple-slider#boat-slider svg {
        --_accent-color: var(--c-acquamarine);
    }

    section.simple-slider#taxonomy-serie {
        padding-bottom: 8.5625rem;
    }

    section.simple-slider#single-web-serie {
        padding-top: 5.625rem;
    }
}

/* ============================ */
/* HERO SIMPLE */
/* ============================ */

section.hero.hero-simple {
    overflow: hidden;
    background-color: var(--c-black);
    --_gradient-color: var(--c-black);
    color: var(--c-white);
    word-break: break-word;
}

section.hero.hero-simple .layers {
    height: 100vh;
    height: 100svh;
}

section.hero.hero-simple .layers .layer-bg {
    position: relative;
}

section.hero.hero-simple .layers .layer-bg::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70vh;
    background-image: linear-gradient(transparent, var(--_gradient-color));
}

section.hero.hero-simple .layers .layer-bg .img-wrapper {
    height: 100%;
}

section.hero.hero-simple .layers .layer-fg {
    display: flex;
    padding-bottom: 5rem;
}

section.hero.hero-simple .layers .layer-fg .container {
    height: 100%;
}

section.hero.hero-simple .layers .layer-fg .wrapper {
    height: 100%;
    width: 100%;
    display: grid;
    align-items: end;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--container-gap);
}

section.hero.hero-simple .layers .layer-fg .wrapper .breadcrumb-wrapper {
    padding-bottom: 7.5rem;
}

section.hero.hero-simple .layers .layer-fg .wrapper .title {
    text-align: center;
    font-weight: 350;
    text-transform: uppercase;
}

section.hero.hero-simple .layers .layer-fg .wrapper .cta {
    justify-items: end;
}

section.hero.hero-simple[data-layout="center"] .layers .layer-fg .wrapper .title-wrapper {
    align-self: start;
    margin-top: 50vh;
    margin-top: 50svh;
    max-width: 35.875rem;
    text-wrap: balance;
}

section.hero.hero-simple[data-layout="center"] .layers .layer-fg .wrapper .breadcrumb-wrapper {
    padding-bottom: calc(7.5rem + 50vh - 10rem);
}

section.hero.hero-simple .layers .layer-fg .wrapper .title-wrapper .buttons-wrapper {
    gap: 0.625rem;
    padding: 0.625rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    background-color: rgb(from var(--c-acquamarine) r g b / 0.1);
    width: fit-content;
    margin-inline: auto;
    margin-top: 3.75rem;
}

section.hero.hero-simple .layers .layer-fg .wrapper .title-wrapper .buttons-wrapper > * {
    border-radius: 999px;
    font-weight: 500;
    padding: 0.6875rem 1.25rem;
    background-color: transparent;
    color: var(--c-white);
    position: relative;
    isolation: isolate;
}

section.hero.hero-simple .layers .layer-fg .wrapper .title-wrapper .buttons-wrapper > *.active {
    color: var(--c-black);
}

section.hero.hero-simple .layers .layer-fg .wrapper .title-wrapper .buttons-wrapper > *.active::after {
    content: "";
    background-color: var(--c-acquamarine);
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 999px;
}

body.page-template-blog section.hero.hero-simple {
    background-color: var(--c-black);
}

body.post-type-archive-news section.hero.hero-simple,
body.tax-serie section.hero.hero-simple,
body.page-template-blog section.hero.hero-simple,
body.post-type-archive-racing section.hero.hero-simple,
body.page-template-boat section.hero.hero-simple,
body.page-template-partners section.hero.hero-simple,
body.page-template-research section.hero.hero-simple {
    --_gradient-color: var(--c-blue);
}

body.page-template-research section.hero.hero-simple[data-layout="center"] .layers .layer-fg .wrapper .title-wrapper {
    max-width: 52rem;
}

@media only screen and (max-width: 768px) {
    section.hero.hero-simple .layers .layer-fg {
        padding-bottom: 3.8125rem;
        z-index: 1;
    }

    section.hero.hero-simple .layers .layer-fg .wrapper {
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: end;
        gap: 3.125rem;
    }

    section.hero.hero-simple .layers .layer-fg .wrapper .title {
        text-align: left;
    }

    section.hero.hero-simple[data-layout="center"] .layers .layer-fg .wrapper .breadcrumb-wrapper,
    section.hero.hero-simple .layers .layer-fg .wrapper .breadcrumb-wrapper {
        padding-bottom: 0;
    }

    section.hero.hero-simple .layers .layer-fg .wrapper .breadcrumb-wrapper #breadcrumbs > svg {
        display: none;
    }

    section.hero.hero-simple .layers .layer-fg .wrapper .cta {
        display: none;
    }

    section.hero.hero-simple[data-layout="center"] .layers .layer-fg .wrapper .title-wrapper {
        margin-top: 0;
        width: 100%;
        max-width: none;
    }

    section.hero.hero-simple:has(.buttons-wrapper) .layers .layer-fg .wrapper {
        align-items: center;
        text-align: center;
    }

    section.hero.hero-simple:has(.buttons-wrapper) .layers .layer-fg .wrapper .title {
        text-align: center;
    }

    section.hero.hero-simple:has(.buttons-wrapper) .layers .layer-fg .wrapper .title-wrapper .buttons-wrapper {
        margin-top: 3.3125rem;
    }
}

/* ============================ */
/* SIMPLE TEXT */
/* ============================ */

section.simple-text {
    background-color: var(--c-black);
    color: var(--c-white);
    text-align: center;
    padding-bottom: 10.9375rem;
}

section.simple-text .description strong {
    font-weight: 500;
}

@media only screen and (max-width: 768px) {
    section.simple-text {
        padding-bottom: 6.25rem;
        text-align: start;
    }
}

/* ============================ */
/* TITLE IMG SIDE */
/* ============================ */

section.title-img-side {
    padding-top: 9.375rem;
    padding-bottom: 6.25rem;
    position: relative;
}

section.title-img-side::after {
    pointer-events: none;
    content: "";
    height: 48.0625rem;
    width: 31.25rem;
    background-image: url("assets/img/logo-bg-img.svg");
    background-size: 200%;
    background-repeat: no-repeat;
    position: absolute;
    top: 18.25rem;
    right: 0;
}

section.title-img-side .section-title {
    color: var(--c-blue);
    text-transform: uppercase;
    margin-bottom: 7.8125rem;
    width: fit-content;
    margin-inline: auto;
    text-align: center;
    position: relative;
    font-weight: 500;
}

section.title-img-side .section-title svg {
    position: absolute;
    top: 0.5rem;
    left: -26.125rem;
}

section.title-img-side .title {
    font-weight: 300;
    color: var(--c-blue);
    margin-bottom: 6.8125rem;
    text-align: center;
}

section.title-img-side .content-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--container-gap);
    align-items: center;
    position: relative;
}

section.title-img-side .content-wrapper .img-wrapper {
    overflow: hidden;
    border-radius: 0.625rem;
}

section.title-img-side .content-wrapper .text {
    max-width: 28.3125rem;
    margin-left: auto;
}

section.title-img-side .content-wrapper .link {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(80%) rotate(-5deg);
    color: var(--c-green);
}

@media only screen and (max-width: 768px) {
    section.title-img-side {
        padding-top: 8.0625rem;
        padding-bottom: 0;
    }

    section.title-img-side .section-title {
        margin-inline: 0;
        margin-bottom: 5.9375rem;
        text-align: start;
    }

    section.title-img-side .section-title svg {
        top: -39px;
        left: -20px;
    }

    section.title-img-side .title {
        margin-bottom: 3.125rem;
        text-align: left;
        font-weight: 400;
    }

    section.title-img-side .content-wrapper {
        display: grid;
        grid-template-columns: 1fr;
        row-gap: 3.125rem;
    }

    section.title-img-side .content-wrapper .link {
        display: flex;
        justify-content: center;
        align-items: center;
        position: static;
        margin-top: 3.375rem;
        transform: none;
    }
}

/* ============================ */
/* ICONS AND TEXTS */
/* ============================ */

section.icons-and-texts {
    padding-top: 8.8125rem;
    padding-bottom: 8.8125rem;
}

section.icons-and-texts .container {
    display: flex;
    flex-direction: column;
    gap: 7.125rem;
    text-align: center;
    align-items: center;
}

section.icons-and-texts .container > * {
    width: 100%;
}

section.icons-and-texts .container .description {
    max-width: 43.125rem;
}

section.icons-and-texts .container .description strong {
    font-weight: 500;
}

section.icons-and-texts .container .icons-wrapper {
    display: grid;
    --grid-item-width: 3.125rem;
    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));
}

section.icons-and-texts .container .icons-wrapper {
    display: grid;
    --grid-item-width: 13.125rem;
    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);
}

@media only screen and (max-width: 768px) {
    section.icons-and-texts {
        padding-top: 6.25rem;
        padding-bottom: 6.875rem;
    }

    section.icons-and-texts .container {
        gap: 5.6875rem;
    }

    section.icons-and-texts .container .description {
        max-width: none;
        text-align: start;
    }

    section.icons-and-texts .container .icons-wrapper {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        row-gap: 5.6875rem;
    }
}

/* ============================ */
/* BANNER SIMPLE */
/* ============================ */

section.banner.banner-simple .layers .layer-bg .img-wrapper {
    height: 100%;
    overflow: hidden;
}

section.banner.banner-simple .layers .layer-fg {
    padding-block: 12.1875rem;
    display: grid;
    place-items: center;
    background-color: rgb(from black r g b / 0.2);
    text-align: center;
    color: var(--c-white);
}

section.banner.banner-simple .layers .layer-fg .description {
    font-weight: 500;
}

section.banner.banner-simple:has(.title) .layers .layer-fg {
    text-align: start;
}

section.banner.banner-simple:has(.title) .layers .layer-fg .container {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: var(--container-gap);
}

section.banner.banner-simple:has(.title) .layers .layer-fg .container .description,
section.banner.banner-simple:has(.title) .layers .layer-fg .container .title {
    max-width: 26.0625rem;
}

section.banner.banner-simple:has(.title) .layers .layer-fg .container .title {
    font-weight: 500;
    padding-left: 1.25rem;
    position: relative;
}

section.banner.banner-simple:has(.title) .layers .layer-fg .container .title::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 1px;
    background-color: var(--c-acquamarine);
}

section.banner.banner-simple:has(.title) .layers .layer-fg .container .description {
    font-weight: 400;
}

@media only screen and (max-width: 768px) {
    section.banner.banner-simple .layers .layer-fg {
        padding-block: 13.875rem;
    }

    section.banner.banner-simple:has(.title) .layers .layer-fg {
        padding-top: 6.875rem;
        padding-bottom: 6.25rem;
    }

    section.banner.banner-simple:has(.title) .layers .layer-fg .container {
        gap: 3.625rem;
        display: flex;
        flex-direction: column;
    }

    section.banner.banner-simple .layers .layer-fg .description {
        text-wrap: balance;
    }
}

/* ============================ */
/* CONTENT IN CENTER */
/* ============================ */

section.content-in-center {
    overflow: hidden;
    padding-top: 8.25rem;
    padding-bottom: 7.4375rem;
    text-align: center;
    background-image: url("assets/img/logo-bg-img.svg");
    background-size: 62.5rem 48.0625rem;
    background-position: calc(0% - 31.25rem) center;
    background-repeat: no-repeat;
}

section.content-in-center .section-title {
    margin-bottom: 6.625rem;
    color: var(--c-blue);
    font-weight: 500;
    max-width: 6.6875rem;
    margin-inline: auto;
    position: relative;
}

section.content-in-center .section-title svg {
    position: absolute;
    top: 0.5rem;
    left: -17.5rem;
}

section.content-in-center .title {
    font-weight: 300;
    margin-bottom: 4.375rem;
    color: var(--c-blue);
}

section.content-in-center .img-wrapper {
    border-radius: 0.625rem;
    overflow: hidden;
    max-width: 43.125rem;
    margin-inline: auto;
}

section.content-in-center .img-wrapper img {
    height: 100%;
    object-fit: cover;
    margin-inline: auto;
}

section.content-in-center .description {
    margin-top: 4.625rem;
    max-width: 43.125rem;
    margin-inline: auto;
}

section.content-in-center .description strong {
    font-weight: 500;
}

@media only screen and (max-width: 768px) {
    section.content-in-center {
        padding-top: 8.6875rem;
        padding-bottom: 6.25rem;
    }

    section.content-in-center .title {
        margin-bottom: 4.375rem;
        text-align: start;
    }

    section.content-in-center .description {
        margin-top: 3.75rem;
        text-align: start;
    }

    section.content-in-center .section-title {
        margin-bottom: 4.75rem;
        margin-inline: 0;
        text-align: start;
        width: auto;
        max-width: 8.25rem;
    }

    section.content-in-center .section-title svg {
        top: -39px;
        left: -20px;
    }
}

/* ============================ */
/* CARDS GRID */
/* ============================ */

section.cards-grid .cards-wrapper {
    display: grid;
    --grid-item-width: 21.4375rem;
    grid-template-columns: repeat(auto-fill, minmax(var(--grid-item-width), 1fr));
    grid-template-columns: repeat(auto-fill, minmax(min(var(--grid-item-width), 100%), 1fr));
    gap: var(--container-gap);
}

section.cards-grid .cards-wrapper .card {
    display: flex;
    flex-direction: column;
    gap: 1.875rem;
}

section.cards-grid .cards-wrapper .card .img-wrapper {
    aspect-ratio: 439/273;
    border-radius: 0.5rem;
    overflow: hidden;
    height: auto;
    margin-top: 13.5%;
}

section.cards-grid .cards-wrapper .card:first-child .img-wrapper {
    margin-top: 0;
    mask-image: url("assets/img/folder-card.svg");
    mask-repeat: no-repeat;
    mask-size: contain;
    height: auto;
    aspect-ratio: 439/330;
}

section.cards-grid .cards-wrapper .card .title {
    position: relative;
    font-weight: 500;
}

section.cards-grid .cards-wrapper .card .title::after {
    content: "";
    position: absolute;
    bottom: -0.9375rem;
    left: 0;
    width: 1.8125rem;
    border-top: 2px solid var(--c-acquamarine);
}

@media only screen and (max-width: 768px) {
    section.cards-grid .cards-wrapper {
        row-gap: 3.75rem;
    }

    section.cards-grid .cards-wrapper .card .img-wrapper {
        margin-top: 0;
    }
}

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

section.final-text {
    padding-top: 7.4375rem;
    padding-bottom: 9.4375rem;
}

section.final-text .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4.375rem;
    text-align: center;
}

section.final-text .container .logo {
    max-width: 3.125rem;
}

section.final-text .container .title {
    text-align: center;
}

section.final-text .container .title strong {
    font-weight: 500;
}

section.final-text .container .description {
    font-weight: 400;
}

section.final-text .container .description strong {
    font-weight: 500;
}

section.final-text .container .btn {
    color: var(--c-blue);
}

section.final-text#final-text-partners {
    background-color: var(--c-blue);
    color: var(--c-white);
}

section.final-text#final-text-partners .btn {
    color: var(--c-white);
}

section.final-text#final-text-skipper {
    background-color: var(--c-black);
    color: var(--c-white);
}

section.final-text#final-text-skipper .title {
    margin-block: 0.625rem;
}

section.final-text#final-text-skipper .title strong {
    color: var(--c-acquamarine);
}

section.final-text#final-text-skipper .description {
    max-width: 28.5625rem;
}

section.final-text#final-text-sustainability {
    background-color: var(--c-black);
    color: var(--c-white);
}

section.final-text#final-text-sustainability .title {
    font-weight: 500;
}

@media only screen and (max-width: 768px) {
    section.final-text {
        padding-top: 6.25rem;
        padding-bottom: 6.875rem;
    }

    section.final-text .container {
        gap: 0;
    }

    section.final-text .container .logo {
        margin-bottom: 4.375rem;
    }

    section.final-text .container .link {
        margin-top: 4.375rem;
    }

    section.final-text#final-text-skipper {
        padding-top: 5rem;
        padding-bottom: 3.75rem;
    }

    section.final-text#final-text-skipper .container .logo {
        margin-bottom: 0;
    }

    section.final-text#final-text-skipper .title {
        margin-top: 3.75rem;
        margin-bottom: 3.4375rem;
    }

    section.final-text#final-text-sustainability {
        padding-top: 1.875rem;
        padding-bottom: 3.75rem;
    }

    section.final-text#final-text-sustainability .logo {
        margin-bottom: 0;
    }

    section.final-text#final-text-sustainability .title {
        margin-block: 3.75rem;
    }
}

/* ============================ */
/* INTRO TEXT */
/* ============================ */

section.intro-text {
    padding-block: 7.25rem;
    color: var(--c-white);
    background-color: var(--c-blue);
}

section.intro-text .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--container-gap);
}

section.intro-text .container .title {
    max-width: 32.5rem;
}

section.intro-text .container .description strong {
    font-weight: 500;
}

@media only screen and (max-width: 768px) {
    section.intro-text {
        padding-top: 1.25rem;
        padding-bottom: 5rem;
    }

    section.intro-text .container {
        display: flex;
        flex-direction: column;
        gap: 3.125rem;
    }
}

/* ============================ */
/* PARTNERS WRAPPER */
/* ============================ */

section.partners-wrapper {
    overflow: hidden;
}

section.partners-wrapper .partner-group {
    --_padding-top: 6.25rem;
    --_padding-bottom: 6.25rem;
    --_divider-height: 3.5625rem;
    padding-top: calc(var(--_padding-top) + (var(--_divider-height) / 2));
    padding-bottom: calc(var(--_padding-bottom) + (var(--_divider-height) / 2));
    position: relative;
}

section.partners-wrapper .partner-group:first-child {
    padding-top: var(--_padding-top);
}

section.partners-wrapper .partner-group:last-child {
    padding-bottom: 14.8125rem;
}

section.partners-wrapper .partner-group:last-child svg.divider {
    display: none;
}

section.partners-wrapper .partner-group .top {
    display: flex;
    align-items: start;
    justify-content: space-between;
    margin-bottom: 4.375rem;
    gap: 1.5rem;
}

section.partners-wrapper .partner-group .top .title {
    max-width: 28.25rem;
    color: var(--c-blue);
    font-weight: 500;
}

section.partners-wrapper .partner-group .top .description {
    max-width: 35.5625rem;
}

section.partners-wrapper .partner-group .top .description strong {
    font-weight: 500;
}

section.partners-wrapper .partner-group .bottom .partners {
    display: grid;
    --grid-item-width: 11rem;
    grid-template-columns: repeat(auto-fill, minmax(var(--grid-item-width), 1fr));
    grid-template-columns: repeat(auto-fill, minmax(min(var(--grid-item-width), 100%), 1fr));
    gap: 1.25rem;
}

section.partners-wrapper .partner-group .bottom .partners .partner .img-wrapper {
    aspect-ratio: 180/133;
    border-radius: 0.5rem;
    background-color: #f5f5f5;
    display: grid;
    place-items: center;
    padding: 1.25rem;
}

section.partners-wrapper .partner-group svg.divider {
    position: absolute;
    bottom: 0;
    left: 0;
    width: auto;
    max-width: 100%;
    height: var(--_divider-height);
    transform: translateY(50%);
}

@media only screen and (max-width: 768px) {
    section.partners-wrapper .partner-group {
        --_padding-top: 4.375rem;
        --_padding-bottom: 6.25rem;
        --_divider-height: 3.875rem;
        padding-top: calc(var(--_padding-top) + (var(--_divider-height) / 2));
        padding-bottom: calc(var(--_padding-bottom) + (var(--_divider-height) / 2));
        position: relative;
    }

    section.partners-wrapper .partner-group:first-child {
        padding-top: 6.25rem;
    }

    section.partners-wrapper .partner-group:last-child {
        padding-bottom: 6.25rem;
    }

    section.partners-wrapper .partner-group .top {
        display: flex;
        flex-direction: column;
        gap: 3.125rem;
        margin-bottom: 3.125rem;
    }

    section.partners-wrapper .partner-group .bottom .partners {
        display: grid;
        --grid-item-width: 8rem;
    }
}

/* ============================ */
/* ROUNDED IMG CONTENT */
/* ============================ */

section.rounded-img-content {
    padding-bottom: 9.375rem;
    background-image: linear-gradient(to bottom, var(--c-blue) 0%, var(--c-black) 50%, var(--c-black));
    color: var(--c-white);
}

section.rounded-img-content .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5rem;
    text-align: center;
}

section.rounded-img-content .container .img-wrapper {
    height: auto;
    overflow: hidden;
    width: 100%;
    max-width: 24.625rem;
    aspect-ratio: 1/1;
    border-radius: 100%;
}

section.rounded-img-content .container .title {
    font-weight: 500;
}

section.rounded-img-content .container .description {
    margin-top: 0.625rem;
}

section.rounded-img-content .container .description strong {
    font-weight: 500;
}

@media only screen and (max-width: 768px) {
    section.rounded-img-content {
        padding-bottom: 6.25rem;
        background-image: linear-gradient(var(--c-blue), var(--c-black));
    }

    section.rounded-img-content .container {
        gap: 2.75rem;
        text-align: left;
    }

    section.rounded-img-content .container .img-wrapper {
        max-width: none;
        border-radius: 0.625rem;
    }
}

/* ============================ */
/* ACCORDIONS */
/* ============================ */

section.accordions {
    padding-top: 7.5rem;
    padding-bottom: 3.375rem;
}

section.accordions .titles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--container-gap);
    margin-bottom: 7.5rem;
}

section.accordions .titles .title {
    text-transform: uppercase;
    color: var(--c-blue);
}

section.accordions .titles .description {
    font-weight: 500;
    margin-inline: auto;
    max-width: 20.9375rem;
}

section.accordions .accordions-wrapper .accordion {
    border-top: 1px solid transparent;
    position: relative;
}

section.accordions .accordions-wrapper .accordion::after {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 80%;
    border-top: 1px solid var(--c-blue);
}

section.accordions .accordions-wrapper .accordion::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 100%;
    border-top: 1px dashed var(--c-blue);
}

@media only screen and (max-width: 768px) {
    section.accordions .accordions-wrapper {
        position: relative;
    }

    section.accordions .accordions-wrapper::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 1px;
        width: 80%;
        border-bottom: 1px solid var(--c-blue);
    }

    section.accordions .accordions-wrapper::before {
        content: "";
        position: absolute;
        left: 0;
        bottom: 1px;
        width: 100%;
        border-bottom: 1px dashed var(--c-blue);
    }

    section.accordions .titles .description {
        margin-inline: 0;
        max-width: none;
    }
}

section.accordions .accordions-wrapper .accordion .accordion-head {
    cursor: pointer;
    padding-top: 1.5rem;
    padding-bottom: 1.9375rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

section.accordions .accordions-wrapper .accordion .accordion-head .accordion-title {
    color: var(--c-blue);
    font-weight: 500;
    flex-grow: 1;
}

section.accordions .accordions-wrapper .accordion .accordion-head button {
    flex-shrink: 0;
    height: 2.8125rem;
    width: 2.8125rem;
    display: grid;
    place-items: center;
    color: var(--c-blue);
    background-color: rgb(from var(--c-blue) r g b / 0.1);
    border-radius: 99px;
    transition:
        transform 0.3s ease,
        color 0.3s ease,
        background-color 0.3s ease;
}

section.accordions .accordions-wrapper .accordion:has(.accordion-body:not([inert])) .accordion-head button {
    transform: rotate(45deg);
    background-color: var(--c-blue);
    color: var(--c-white);
}

section.accordions .accordions-wrapper .accordion .accordion-body {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.3s ease;
}

section.accordions .accordions-wrapper .accordion .accordion-body[inert] {
    grid-template-rows: 0fr;
}

section.accordions .accordions-wrapper .accordion .accordion-body .accordion-content-wrapper {
    overflow: hidden;
}

section.accordions .accordions-wrapper .accordion .accordion-body .accordion-content-wrapper .accordion-content .zones .zone.zone-img img {
    border-radius: 0.625rem;
    overflow: hidden;
}

section.accordions .accordions-wrapper .accordion .accordion-body .accordion-content-wrapper .accordion-content .zones .zone.zone-text {
    display: grid;
    gap: 5.9375rem;
}

section.accordions .accordions-wrapper .accordion .accordion-body .accordion-content-wrapper .accordion-content .zones .zone.zone-text .icons-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    justify-content: space-between;
    gap: 4rem;
    max-width: 58.125rem;
}

section.accordions .accordions-wrapper .accordion .accordion-body .accordion-content-wrapper .accordion-content .zones .zone.zone-text .icons-wrapper .single-icon {
    flex-basis: 11.25rem;
}

section.accordions .accordions-wrapper .accordion .accordion-body .accordion-content-wrapper .accordion-content .zones .zone.zone-text .icons-wrapper .single-icon .icon {
    display: grid;
    place-items: center;
}

section.accordions .accordions-wrapper .accordion .accordion-body .accordion-content-wrapper .accordion-content .zones .zone.zone-text .icons-wrapper .single-icon .icon * {
    max-width: 2.375rem;
    max-height: 2.375rem;
}

section.accordions .accordions-wrapper .accordion[data-layout="inline_img"] .accordion-body .accordion-content-wrapper .accordion-content .zones {
    padding-bottom: 3.1875rem;
    display: flex;
    gap: 4.5rem;
    justify-content: space-between;
    align-items: start;
}

section.accordions .accordions-wrapper .accordion[data-layout="inline_img"] .accordion-body .accordion-content-wrapper .accordion-content .zones .zone.zone-text .description {
    max-width: 31.25rem;
}

section.accordions .accordions-wrapper .accordion[data-layout="inline_img"] .accordion-body .accordion-content-wrapper .accordion-content .zones .zone.zone-img {
    max-width: 23.9375rem;
}

section.accordions .accordions-wrapper .accordion[data-layout="block_img"] .accordion-body .accordion-content-wrapper .accordion-content .zones {
    display: grid;
    gap: 3.4375rem;
    padding-bottom: 3.75rem;
}

section.accordions .accordions-wrapper .accordion[data-layout="block_img"] .accordion-body .accordion-content-wrapper .accordion-content .zones .zone.zone-img {
    order: -1;
}

@media only screen and (max-width: 768px) {
    section.accordions {
        padding-top: 6.25rem;
        padding-bottom: 0;
    }

    section.accordions .container {
        padding: 0;
    }

    section.accordions .titles {
        padding-inline: var(--container-x-padding);
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 3.75rem;
        margin-bottom: 3.75rem;
    }

    section.accordions .accordions-wrapper .accordion .accordion-head {
        padding: 1.25rem;
        padding-inline: var(--container-x-padding);
    }

    section.accordions .accordions-wrapper .accordion[data-layout="inline_img"] .accordion-body .accordion-content-wrapper .accordion-content .zones,
    section.accordions .accordions-wrapper .accordion[data-layout="block_img"] .accordion-body .accordion-content-wrapper .accordion-content .zones,
    section.accordions .accordions-wrapper .accordion .accordion-body .accordion-content-wrapper .accordion-content .zones {
        padding-inline: var(--container-x-padding);
        padding-top: 1.875rem;
        padding-bottom: 6.25rem;
    }

    section.accordions .accordions-wrapper .accordion[data-layout="inline_img"] .accordion-body .accordion-content-wrapper .accordion-content .zones {
        margin-top: 0;
    }

    section.accordions .accordions-wrapper .accordion[data-layout="block_img"] .accordion-body .accordion-content-wrapper .accordion-content .zones {
        gap: 3.125rem;
    }

    section.accordions .accordions-wrapper .accordion .accordion-body .accordion-content-wrapper .accordion-content .zones .zone.zone-text {
        gap: 3.75rem;
    }

    section.accordions .accordions-wrapper .accordion .accordion-body .accordion-content-wrapper .accordion-content .zones .zone.zone-text .icons-wrapper {
        gap: var(--container-gap);
        row-gap: 4.4375rem;
        justify-content: space-evenly;
    }

    section.accordions .accordions-wrapper .accordion .accordion-body .accordion-content-wrapper .accordion-content .zones .zone.zone-text .icons-wrapper .single-icon {
        flex-basis: 8rem;
        flex-grow: 1;
    }

    section.accordions .accordions-wrapper .accordion[data-layout="inline_img"] .accordion-body .accordion-content-wrapper .accordion-content .zones {
        display: flex;
        flex-direction: column;
        gap: 3.125rem;
    }
}

/* ============================ */
/* SIDE IMG */
/* ============================ */

section.side-img {
    padding-top: 8.1875rem;
    padding-bottom: 9.375rem;
    background-image: url("assets/img/logo-bg-img.svg");
    background-size: 62.5rem 48.0625rem;
    background-position: calc(100% + 31.25rem) center;
    background-repeat: no-repeat;
}

section.side-img .container {
    display: grid;
    gap: 5.625rem;
}

section.side-img .container .top .title {
    text-align: center;
    text-transform: uppercase;
    color: var(--c-blue);
}

section.side-img .container .bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--container-gap);
    align-items: center;
}

section.side-img .container .bottom .img-container .img-wrapper {
    border-radius: 0.625rem;
    overflow: hidden;
}

section.side-img .container .bottom .text-container {
    display: grid;
    gap: 4.5rem;
    max-width: 28.3125rem;
    margin-left: auto;
}

section.side-img#side-img-program {
    padding-top: 0.6875rem;
    background-color: var(--c-black);
    color: var(--c-white);
    background-image: none;
    padding-bottom: 10.5rem;
}

@media only screen and (max-width: 768px) {
    section.side-img {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

    section.side-img .container {
        gap: 3.75rem;
    }

    section.side-img .container .top .title {
        text-align: left;
    }

    section.side-img .container .bottom {
        gap: 3.75rem;
        display: flex;
        flex-direction: column;
    }

    section.side-img .container .bottom .text-container {
        display: flex;
        flex-direction: column;
        gap: 3.75rem;
    }

    section.side-img#side-img-program {
        padding-top: 0;
        padding-bottom: 6.25rem;
    }

    section.side-img#side-img-program .container .bottom {
        gap: 3.125rem;
        text-align: center;
    }
}

/* ============================ */
/* HOVER CARDS GRID */
/* ============================ */

section.hover-cards-grid {
    padding-top: 8.125rem;
    padding-bottom: 17.6875rem;
    background-color: var(--c-black);
    color: var(--c-white);
}

section.hover-cards-grid .container {
    display: grid;
    gap: 4.25rem;
}

section.hover-cards-grid .top {
    display: grid;
    gap: 8.125rem;
}

section.hover-cards-grid .top .section-title {
    position: relative;
    width: fit-content;
    text-align: center;
    margin-inline: auto;
    text-transform: uppercase;
    color: var(--c-acquamarine);
    font-weight: 500;
}

section.hover-cards-grid .top .section-title svg {
    position: absolute;
    top: 0.5rem;
    left: -24rem;
}

section.hover-cards-grid .top .title {
    text-align: center;
    text-transform: uppercase;
}

section.hover-cards-grid .bottom {
    position: relative;
}

section.hover-cards-grid .bottom .cards-wrapper {
    display: grid;
    --grid-item-width: 31.25rem;
    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);
    grid-auto-rows: 1fr;
}

section.hover-cards-grid .bottom .cards-wrapper .card {
    border-radius: 0.625rem;
    overflow: hidden;
    cursor: pointer;
}

section.hover-cards-grid .bottom .cards-wrapper .card .layers {
    height: 100%;
}

section.hover-cards-grid .bottom .cards-wrapper .card .layers .layer-bg .img-wrapper {
    height: 100%;
}

section.hover-cards-grid .bottom .cards-wrapper .card .layers .layer-fg {
    background-color: var(--c-blue);
    padding-block: 2.875rem;
    padding-inline-start: 3.125rem;
    padding-inline-end: 2.5rem;
    display: flex;
    gap: 0.8125rem;
    transition: background-color 0.3s ease;
}

section.hover-cards-grid .bottom .cards-wrapper .card:has(.description[inert]) .layers .layer-fg {
    background-color: rgb(0 0 0 / 0.15);
}

section.hover-cards-grid .bottom .cards-wrapper .card .layers .layer-fg .text {
    gap: 2.1875rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

section.hover-cards-grid .bottom .cards-wrapper .card .layers .layer-fg .text .title {
    font-weight: 500;
}

section.hover-cards-grid .bottom .cards-wrapper .card .layers .layer-fg .text .description {
    cursor: auto;
    display: grid;
    gap: 1.875rem;
    transition:
        transform 0.3s ease,
        opacity 0.3s ease,
        filter;
}

section.hover-cards-grid .bottom .cards-wrapper .card .layers .layer-fg .text .description[inert] {
    filter: blur(4px);
    opacity: 0;
    transform: translateY(2%);
}

section.hover-cards-grid .bottom .cards-wrapper .card .layers .layer-fg .text .description p {
    padding-top: 0.75rem;
    position: relative;
}

section.hover-cards-grid .bottom .cards-wrapper .card .layers .layer-fg .text .description p::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0.9375rem;
    height: 0.125rem;
    background-color: var(--c-acquamarine);
}

section.hover-cards-grid .bottom .cards-wrapper .card .layers .layer-fg .text .description p strong {
    font-weight: 500;
}

section.hover-cards-grid .bottom .cards-wrapper .card .layers .layer-fg button {
    height: 2.8125rem;
    width: 2.8125rem;
    border-radius: 6.1875rem;
    background-color: rgb(255 255 255 / 0.1);
    backdrop-filter: blur(1.25rem);
    display: grid;
    place-items: center;
    align-self: end;
    flex-shrink: 0;
    transform: rotate(45deg);
    transition: transform 0.3s ease;
}

section.hover-cards-grid .bottom .cards-wrapper .card:has(.description[inert]) .layers .layer-fg button {
    transform: rotate(0deg);
}

section.hover-cards-grid .bottom .link {
    position: absolute;
    bottom: 0;
    left: 55%;
    transform: translateY(90%) rotate(10deg);
}

@media only screen and (max-width: 768px) {
    section.hover-cards-grid {
        padding-top: 7.4375rem;
        padding-bottom: 5rem;
    }

    section.hover-cards-grid .top {
        gap: 4.375rem;
    }

    section.hover-cards-grid .top .section-title {
        width: 100%;
        text-align: left;
        max-width: 9.1875rem;
        margin-inline: 0;
    }

    section.hover-cards-grid .top .section-title svg {
        top: -39px;
        left: -20px;
    }

    section.hover-cards-grid .top .title {
        text-align: left;
    }

    section.hover-cards-grid .container {
        gap: 4.375rem;
    }

    section.hover-cards-grid .bottom .cards-wrapper {
        grid-auto-rows: auto;
        gap: 6.25rem;
    }

    section.hover-cards-grid .bottom .cards-wrapper .card {
        --_img-height: 16.4375rem;
    }

    section.hover-cards-grid .bottom .cards-wrapper .card .layers {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: [all-start title-start] auto [title-end] 2.5rem [img-start] var(--_img-height) [img-end description-start] auto [description-end all-end];
    }

    section.hover-cards-grid .bottom .cards-wrapper .card .layers .layer-fg .text,
    section.hover-cards-grid .bottom .cards-wrapper .card .layers .layer {
        grid-column: 1;
        grid-row: all;
        display: grid;
        grid-template-rows: subgrid;
        grid-template-columns: 1fr;
        gap: 0;
    }

    section.hover-cards-grid .bottom .cards-wrapper .card .layers .layer-bg .img-wrapper {
        grid-row: img;
        border-radius: 0.625rem;
        overflow: hidden;
    }

    section.hover-cards-grid .bottom .cards-wrapper .card:has(.description[inert]) .layers .layer-fg,
    section.hover-cards-grid .bottom .cards-wrapper .card .layers .layer-fg {
        padding: 0;
        gap: 0;
        background-color: transparent;
    }

    section.hover-cards-grid .bottom .cards-wrapper .card .layers .layer-fg > button {
        grid-row: img;
        grid-column: 1;
        margin: 1.25rem;
    }

    section.hover-cards-grid .bottom .cards-wrapper .card .layers .layer-fg .text .description {
        grid-row: description;
    }

    section.hover-cards-grid .bottom .cards-wrapper .card .layers .layer-fg .text .description > :first-child {
        margin-top: 3.125rem;
    }

    @supports not (interpolate-size: allow-keywords) {
        section.hover-cards-grid .bottom .cards-wrapper .card .layers .layer-fg .text .description {
            max-height: 900px;
            transition: all 0.3s ease;
        }

        section.hover-cards-grid .bottom .cards-wrapper .card .layers .layer-fg .text .description[inert] {
            max-height: 0px;
        }
    }

    @supports (interpolate-size: allow-keywords) {
        section.hover-cards-grid .bottom .cards-wrapper .card .layers .layer-fg .text .description {
            height: auto;
            transition: all 0.3s ease;
            interpolate-size: allow-keywords;
        }

        section.hover-cards-grid .bottom .cards-wrapper .card .layers .layer-fg .text .description[inert] {
            height: 0;
        }
    }

    section.hover-cards-grid .bottom .link {
        position: static;
        transform: none;
        display: flex;
        justify-content: center;
        margin-top: 4.375rem;
    }
}

/* ============================ */
/* SPLITS */
/* ============================ */

section.splits {
    padding-top: 8.75rem;
    padding-bottom: 6.25rem;
}

section.splits .container {
    display: grid;
    gap: 6.8125rem;
}

section.splits .top {
    display: grid;
    gap: 7.8125rem;
}

section.splits .top .section-title {
    position: relative;
    text-transform: uppercase;
    font-weight: 500;
    width: fit-content;
    color: var(--c-blue);
    margin-inline: auto;
}

section.splits .top .section-title svg {
    position: absolute;
    top: 0.5rem;
    left: -23rem;
}

section.splits .top .title {
    text-align: center;
    text-transform: uppercase;
    color: var(--c-blue);
}

section.splits .splits-wrapper {
    display: grid;
    gap: 6.875rem;
}

section.splits .splits-wrapper .split .zones {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--container-gap);
    align-items: center;
}

section.splits .splits-wrapper .split .zones .zone.zone-img .img-wrapper {
    border-radius: 0.625rem;
    overflow: hidden;
}

section.splits .splits-wrapper .split .zones .zone.zone-text {
    display: grid;
    gap: 3.125rem;
    max-width: 28.375rem;
    margin-left: auto;
    color: var(--c-blue);
}

section.splits .splits-wrapper .split .zones .zone.zone-text .description strong {
    font-weight: 500;
}

section.splits .splits-wrapper .split:nth-child(even) .zones .zone.zone-text {
    order: -1;
}

section.splits .splits-wrapper .split:nth-child(even) .zones .zone.zone-text {
    margin-left: 0;
    margin-right: auto;
}

@media only screen and (max-width: 768px) {
    section.splits {
        padding-top: 8.75rem;
        padding-bottom: 4.0625rem;
    }

    section.splits .container {
        gap: 3.125rem;
    }

    section.splits .top {
        gap: 4.8125rem;
    }

    section.splits .top .section-title {
        width: 100%;
        text-align: start;
        max-width: 8.25rem;
        margin-inline: 0;
    }

    section.splits .top .section-title svg {
        top: -39px;
        left: -20px;
    }

    section.splits .top .title {
        text-align: left;
    }

    section.splits .splits-wrapper {
        gap: 3.125rem;
    }

    section.splits .splits-wrapper .split .zones {
        display: grid;
        gap: 3.125rem;
        grid-template-columns: 1fr;
    }

    section.splits .splits-wrapper .split .zones .zone.zone-img {
        order: 2;
    }
}

/* ============================ */
/* TEAM */
/* ============================ */

section.team {
    display: grid;
    gap: 7.5625rem;
    padding-top: 10.75rem;
    overflow: hidden;
    padding-bottom: 13.125rem;
    background-color: var(--c-blue);
    color: var(--c-white);
}

section.team .top .container {
    display: grid;
    grid-template-columns: 1fr [title-start] auto [title-end] 1fr;
    gap: var(--container-gap);
    align-items: center;
}

section.team .top .container .section-title {
    text-transform: uppercase;
    font-weight: 500;
    color: var(--c-acquamarine);
    position: relative;
    transform: translateY(-10%);
}

section.team .top .container .section-title svg {
    position: absolute;
    top: -1.75rem;
    left: -4.125rem;
}

section.team .top .container .title {
    text-transform: uppercase;
    text-align: center;
    max-width: 28.3125rem;
    margin-inline: auto;
}

section.team .bottom .team-wrapper {
    gap: var(--container-gap);
    row-gap: 6.8125rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

section.team .bottom .team-wrapper .person {
    flex-basis: 17.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

section.team .bottom .team-wrapper .person .img-container {
    position: relative;
    --_outline-offset: 0.6875rem;
    outline: 1px dashed var(--c-acquamarine);
    outline-offset: calc(var(--_outline-offset) - 1.5px);
    border-radius: 8888px;
    margin-bottom: 1.9375rem;
}

section.team .bottom .team-wrapper .person .img-container::after {
    content: "";
    position: absolute;
    top: calc(-1 * var(--_outline-offset));
    left: calc(-1 * var(--_outline-offset));
    width: calc(100% + (2 * var(--_outline-offset)));
    height: calc(100% + (2 * var(--_outline-offset)));
    outline: 2px solid var(--c-acquamarine);
    border-radius: 99px;
    outline-offset: -2px;
    mask-image: conic-gradient(from 180deg at 50% 50%, black 18.0000002682209deg, transparent 18.29807013273239deg, transparent 161.99999570846558deg, black 161.99999570846558deg, black 198.00000429153442deg, transparent 198.00000429153442deg, transparent 340.7786250114441deg, black 341.9999957084656deg);
    transform: rotate(var(--_ring-rotation, 0deg));
}

section.team .bottom .team-wrapper .person .img-container .img-wrapper img,
section.team .bottom .team-wrapper .person .img-container .img-wrapper {
    height: 11.25rem;
    width: 11.25rem;
    aspect-ratio: 1/1;
    border-radius: 999px;
    position: relative;
    outline: 1px soli;
}

section.team .bottom .team-wrapper .person .name {
    margin-bottom: 0.625rem;
    font-weight: 500;
}

section.team#sustainability-team {
    background-color: var(--c-black);
}

section.team#team-manifesto {
    background-color: var(--c-black);
    padding-top: 11.4375rem;
    padding-bottom: 11.25rem;
}

@media only screen and (max-width: 768px) {
    section.team#team-manifesto,
    section.team {
        padding-top: 8.6875rem;
        padding-bottom: 6.25rem;
        gap: 7.4375rem;
    }

    section.team#team-manifesto {
        padding-bottom: 0;
    }

    section.team .top .container {
        gap: 6.8125rem;
        display: flex;
        flex-direction: column;
    }

    section.team .top .container .section-title {
        width: 100%;
        max-width: none;
        text-align: start;
        margin-inline: 0;
    }

    section.team .top .container .section-title svg {
        top: -39px;
        left: -20px;
    }

    section.team .top .container .title {
        text-align: start;
    }

    section.team .bottom .container {
        padding: 0;
    }

    section.team .bottom .team-wrapper {
        padding-top: 2rem;
        margin-top: -2rem;
        padding-inline: var(--container-x-padding);
        display: flex;
        flex-wrap: nowrap;
        gap: 2.1875rem;
        overflow: auto;
        justify-content: start;
        align-items: start;
        width: 0;
        min-width: 100%;
    }

    section.team .bottom .team-wrapper::-webkit-scrollbar {
        display: none;
    }

    section.team .bottom .team-wrapper .person {
        flex-basis: auto;
        width: 70vw;
        flex-shrink: 0;
    }
}

/* ============================ */
/* OVERFLOWING IMG */
/* ============================ */

section.overflowing-img {
    --_overflow: min(50vh - 5rem, 14.1875rem);
    margin-top: calc(-1 * var(--_overflow));
    position: relative;
    display: grid;
    grid-template-rows: [video-start] var(--_overflow) [text-start] 1fr [text-end video-end];
    background-image: linear-gradient(transparent, var(--c-black) var(--_overflow));
    color: var(--c-white);
    pointer-events: none;
}

section.overflowing-img .container {
    gap: var(--container-gap);
    grid-row: video;
    display: grid;
    grid-template-rows: subgrid;
    grid-template-columns: 1fr 1fr 1fr;
}

section.overflowing-img .container > * {
    pointer-events: auto;
}

section.overflowing-img .container .text {
    grid-row: text;
    margin-block: 11.875rem;
    max-width: 13.75rem;
    position: relative;
}

section.overflowing-img .container .text strong {
    font-weight: 500;
}

section.overflowing-img .container .text:first-child::after {
    content: "";
    position: absolute;
    width: 1.0625rem;
    height: 0.125rem;
    background-color: var(--c-acquamarine);
    top: -0.625rem;
    left: 0;
}

section.overflowing-img .container .text:last-child {
    margin-left: auto;
}

section.overflowing-img .container .text:last-child::after {
    content: "";
    position: absolute;
    width: 1.0625rem;
    height: 0.125rem;
    background-color: var(--c-acquamarine);
    bottom: -0.625rem;
    left: 0;
}

section.overflowing-img .container .img-wrapper {
    margin-top: auto;
    height: fit-content;
    grid-row: video;
    width: 100%;
    max-width: 28.375rem;
    border-radius: 0.625rem;
    overflow: hidden;
}

@media only screen and (max-width: 768px) {
    section.overflowing-img {
        --_overflow: 0;
    }

    section.overflowing-img .container {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    section.overflowing-img .container .text {
        margin: 0;
        max-width: none;
    }

    section.overflowing-img .container .img-wrapper {
        margin-inline: auto;
        margin-top: 3.125rem;
        margin-bottom: 3.75rem;
        max-height: 80vh;
        max-width: none;
    }

    section.overflowing-img .container .img-wrapper video {
        border-radius: 0.625rem;
        height: 100%;
        overflow: hidden;
    }
}

/* ============================ */
/* MARQUEE */
/* ============================ */

section.marquee {
    --_gap: var(--container-gap);
    --_slider-height: 23.75rem;
}

section.marquee:not(.no-bg) {
    background-color: var(--c-black);
    color: var(--c-white);
}

section.marquee .marquee-container {
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: var(--_gap);
}

section.marquee .marquee-container .marquee-wrapper {
    display: flex;
    align-items: center;
    gap: var(--_gap);
    flex-shrink: 0;
    animation: marquee 40s linear infinite;
}

section.marquee .marquee-container .marquee-wrapper .img-wrapper {
    overflow: hidden;
    border-radius: 0.375rem;
    flex-shrink: 0;
    height: var(--_slider-height);
}

@keyframes marquee {
    to {
        transform: translateX(calc(-100% - var(--_gap, var(--container-gap))));
    }
}

section.marquee .container {
    position: relative;
}

section.marquee .container .link {
    position: absolute;
    bottom: 0;
    right: 6.25rem;
    transform: translateY(90%);
}

section.marquee#manifesto-marquee {
    background-color: transparent;
    color: var(--c-green);
    padding-bottom: 14.5625rem;
}

section.marquee#manifesto-marquee .link {
    right: auto;
    left: 6.25rem;
    rotate: -5deg;
}

@media only screen and (max-width: 768px) {
    section.marquee {
        --_slider-height: 19.375rem;
    }

    section.marquee .container .link {
        position: static;
        display: flex;
        justify-content: center;
        transform: none;
        margin-top: 4.375rem;
    }

    section.marquee#manifesto-marquee {
        padding-bottom: 6.875rem;
    }

    section.marquee#manifesto-marquee .link {
        rotate: none;
    }
}

/* ============================ */
/* ACHIEVEMENTS */
/* ============================ */

section.achievements {
    background-color: var(--c-black);
    color: var(--c-white);
    padding-top: 12.8125rem;
    padding-bottom: 9.125rem;
}

section.achievements .section-title {
    text-transform: uppercase;
    margin-bottom: 9.4375rem;
    width: fit-content;
    margin-inline: auto;
    text-align: center;
    color: var(--c-acquamarine);
    font-weight: 500;
    position: relative;
}

section.achievements .title {
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 7.375rem;
}

section.achievements .achievements-wrapper .single-achievement {
    display: grid;
    grid-template-columns: [year-start] 10.4375rem [year-end goal-start] 1fr [goal-end];
}

section.achievements .achievements-wrapper .single-achievement .year {
    grid-column: year;
    padding-top: 1.375rem;
    font-weight: 300;
    border-top: 1px solid var(--c-acquamarine);
}

section.achievements .achievements-wrapper .single-achievement .goals {
    grid-column: goal;
}

section.achievements .achievements-wrapper .single-achievement .goals .single-goal {
    padding-block: 2.1875rem;
    padding-left: 4.375rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

section.achievements .achievements-wrapper .single-achievement .goals .single-goal::after {
    --_dash-size: 3px;
    content: "";
    height: 1px;
    width: 100%;
    position: absolute;
    top: 0;
    mask-image: linear-gradient(to right, black, transparent);
    background-image: repeating-linear-gradient(to right, transparent, transparent var(--_dash-size), var(--c-acquamarine) var(--_dash-size), var(--c-acquamarine) calc(2 * var(--_dash-size)));
    left: 0;
}

section.achievements .achievements-wrapper .single-achievement .goals .single-goal .award {
    font-weight: 500;
}

@media only screen and (max-width: 768px) {
    section.achievements {
        padding-top: 9.3125rem;
        padding-bottom: 5rem;
    }

    section.achievements .section-title {
        margin-inline: 0;
        position: relative;
        text-align: left;
        margin-bottom: 5rem;
    }

    section.achievements .section-title svg {
        position: absolute;
        top: -39px;
        left: -20px;
    }

    section.achievements .title {
        text-align: left;
        margin-top: 6.1875rem;
        margin-bottom: 6.1875rem;
    }

    section.achievements .achievements-wrapper .single-achievement {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
    }

    section.achievements .achievements-wrapper .single-achievement .year {
        font-size: 0.875rem;
        line-height: 1.714286;
        color: var(--c-acquamarine);
        padding-top: 0.5rem;
        grid-column: 1;
        font-weight: 400;
        border-top-width: 2px;
    }

    section.achievements .achievements-wrapper .single-achievement .goals {
        grid-column: span 3;
    }

    section.achievements .achievements-wrapper .single-achievement .goals .single-goal {
        padding-right: 0;
        padding-left: var(--container-gap);
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        text-align: start;
        align-items: start;
    }

    section.achievements .achievements-wrapper .single-achievement .goals .single-goal .award {
        order: 2;
    }
}

/* ============================ */
/* BIG NUMBER */
/* ============================ */

section.big-number {
    padding-top: 7.9375rem;
    padding-bottom: 9.75rem;
}

section.big-number .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--container-gap);
}

section.big-number .container .left .title {
    color: var(--c-blue);
}

section.big-number .container .left .title .big-text {
    font-weight: 600;
}

section.big-number .container .left .title .section-title {
    margin-top: 3.75rem;
    font-weight: 500;
    display: block;
    text-transform: uppercase;
    position: relative;
}

section.big-number .container .left .title .section-title::after {
    content: "";
    position: absolute;
    top: -1.875rem;
    left: 0;
    width: 3.1875rem;
    height: 0.1875rem;
    background-color: var(--c-acquamarine);
}

section.big-number .container .right .features ul {
    display: grid;
    gap: 3.125rem;
}

section.big-number .container .right .features ul li {
    font-weight: 500;
    color: var(--c-blue);
    display: flex;
    align-items: center;
    gap: var(--container-x-padding);
}

section.big-number .container .right .features ul li .circle {
    display: block;
    height: 2.8125rem;
    width: 2.8125rem;
    border-radius: 999px;
    outline: 1px dashed var(--c-blue);
    outline-offset: -1px;
    position: relative;
    flex-shrink: 0;
}

section.big-number .container .right .features ul li .circle::after {
    content: "";
    border-radius: 999px;
    position: absolute;
    height: 9px;
    width: 9px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--c-acquamarine);
}

section.big-number .container .right .description {
    margin-top: 3.625rem;
    margin-bottom: 5rem;
    font-weight: 500;
}

section.big-number .container .right .link {
    color: var(--c-blue);
}

@media only screen and (max-width: 768px) {
    section.big-number {
        padding-top: 6.25rem;
        padding-bottom: 6.875rem;
    }

    section.big-number .container {
        display: grid;
        grid-template-columns: 1fr;
        gap: 6.25rem;
    }

    section.big-number .container .right .description {
        margin-top: 6.25rem;
        margin-bottom: 3.75rem;
    }

    section.big-number .container .right .link {
        display: flex;
        justify-content: center;
    }
}

/* ============================ */
/* NUMBERED SPLITS */
/* ============================ */

section.numbered-splits {
    padding-top: 6.875rem;
    padding-bottom: 17.3125rem;
}

section.numbered-splits .container {
    display: grid;
    gap: 8.5625rem;
    position: relative;
}

section.numbered-splits .container > .link {
    position: absolute;
    bottom: -7.6875rem;
    left: 55%;
    transform: rotate(8deg);
}

section.numbered-splits .titles-wrapper {
    display: grid;
    gap: 10.0625rem;
    text-align: center;
}

section.numbered-splits .titles-wrapper .section-title {
    text-transform: uppercase;
    font-weight: 500;
    color: var(--c-blue);
    position: relative;
    width: fit-content;
    margin-inline: auto;
}

section.numbered-splits .titles-wrapper .section-title svg {
    position: absolute;
    top: 0.5rem;
    left: -26rem;
}

section.numbered-splits .titles-wrapper .title {
    color: var(--c-blue);
}

section.numbered-splits .splits-wrapper {
    display: grid;
    gap: 7.5rem;
}

section.numbered-splits .splits-wrapper .split {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--container-gap);
    align-items: center;
}

section.numbered-splits .splits-wrapper .split .img-wrapper {
    width: 100%;
    height: 100%;
    min-height: 20.625rem;
    max-width: 28.25rem;
    margin-right: auto;
    border-radius: 0.625rem;
    overflow: hidden;
}

section.numbered-splits .splits-wrapper .split .text-wrapper {
    display: grid;
    gap: 1.875rem;
}

section.numbered-splits .splits-wrapper .split .text-wrapper .title > * {
    display: flex;
    align-items: start;
    gap: 1.875rem;
}

section.numbered-splits .splits-wrapper .split .text-wrapper .title .number {
    height: 2.8125rem;
    width: 2.8125rem;
    outline: 1px dashed var(--c-acquamarine);
    display: grid;
    place-items: center;
    font-weight: 500;
    background-color: rgb(from var(--c-acquamarine) r g b / 0.1);
    border-radius: 99px;
    flex-shrink: 0;
}

section.numbered-splits .splits-wrapper .split .text-wrapper .title .text {
    font-weight: 500;
}

section.numbered-splits .splits-wrapper .split .text-wrapper .description .fs-body-large {
    margin-top: 1.2lh;
    font-weight: 500;
}

section.numbered-splits .splits-wrapper .split:nth-child(even) .img-wrapper {
    margin-right: 0;
    margin-left: auto;
    order: 2;
}

section.numbered-splits#envolving {
    background-color: var(--c-blue);
    color: var(--c-white);
    padding-top: 0;
    padding-bottom: 0;
}

section.numbered-splits#envolving svg {
    --_svg-color: var(--c-acquamarine);
}

section.numbered-splits#envolving .section-title {
    color: var(--c-acquamarine);
}

section.numbered-splits#envolving .container {
    gap: 10.625rem;
}

@media only screen and (max-width: 768px) {
    section.numbered-splits {
        padding-top: 8.6875rem;
        padding-bottom: 6.875rem;
    }

    section.numbered-splits .titles-wrapper {
        gap: 5.9375rem;
    }

    section.numbered-splits .titles-wrapper .section-title {
        margin-inline: 0;
        width: 100%;
        max-width: none;
        text-align: left;
    }

    section.numbered-splits .titles-wrapper .section-title svg {
        max-width: 100%;
        position: absolute;
        top: -39px;
        left: -20px;
    }

    section.numbered-splits .titles-wrapper .title {
        width: 100%;
        text-align: left;
    }

    section.numbered-splits .container {
        gap: 3.125rem;
    }

    section.numbered-splits .splits-wrapper {
        row-gap: 6.25rem;
    }

    section.numbered-splits .splits-wrapper .split {
        display: grid;
        grid-template-columns: 1fr;
        gap: 3.125rem;
    }

    section.numbered-splits .splits-wrapper .split .img-wrapper {
        order: -1 !important;
    }

    section.numbered-splits .container > .link {
        position: static;
        transform: none;
        display: flex;
        justify-content: center;
        margin-top: 1.25rem;
    }

    section.numbered-splits#envolving .container {
        gap: 6.25rem;
    }

    section.numbered-splits#envolving .splits-wrapper .split .img-wrapper {
        order: 2 !important;
    }
}

/* ============================ */
/* BANNER FADE */
/* ============================ */

section.banner.banner-fade {
    background-color: var(--c-blue);
    color: var(--c-white);
}

section.banner.banner-fade .layers .layer-bg .img-wrapper {
    height: 100%;
}

section.banner.banner-fade .layers .layer-fg {
    padding-block: 10.1875rem;
    background-image: linear-gradient(transparent, var(--c-blue));
}

section.banner.banner-fade .layers .layer-fg .container {
    display: grid;
    gap: 1.875rem;
    text-align: center;
}

section.banner.banner-fade .layers .layer-fg .container .title {
    text-transform: uppercase;
}

@media only screen and (max-width: 768px) {
    section.banner.banner-fade .layers .layer-fg {
        padding-block: 6.875rem;
    }
}

/* ============================ */
/* REVERSED FINAL TEXT */
/* ============================ */

section.reversed-final-text {
    padding-top: 14.625rem;
    padding-bottom: 9.125rem;
    text-align: center;
    background-color: var(--c-blue);
    background-image: url("assets/img/logo-bg-img.svg");
    background-size: 62.5rem 48.0625rem;
    background-position: calc(100% + 31.25rem) center;
    background-repeat: no-repeat;
    color: var(--c-white);
}

section.reversed-final-text .container {
    display: grid;
    gap: 6.4375rem;
    justify-content: center;
    justify-items: center;
}

section.reversed-final-text .container .top-wrapper {
    display: grid;
    gap: 3.125rem;
}

section.reversed-final-text .container .title {
    font-weight: 500;
}

section.reversed-final-text .container .claim {
    text-transform: uppercase;
}

@media only screen and (max-width: 768px) {
    section.reversed-final-text {
        padding-top: 6.25rem;
        padding-bottom: 6.875rem;
        background-image: none;
    }

    section.reversed-final-text .container {
        gap: 3.125rem;
    }

    section.reversed-final-text .claim {
        margin-bottom: 0.625rem;
    }
}

/* ============================ */
/* ALTERNATIVE BUBBLES */
/* ============================ */

section.alternative-bubbles {
    padding-top: 1.875rem;
    padding-bottom: 18.125rem;
    background-color: var(--c-black);
    color: var(--c-white);
    text-align: center;
    overflow: hidden;
}

section.alternative-bubbles .container {
    display: grid;
    gap: 6.25rem;
    position: relative;
    height: auto;
    border-radius: 999px;
}

section.alternative-bubbles .container .floating-img {
    position: absolute;
    width: 100%;
    aspect-ratio: 1/1;
    height: auto;
}

section.alternative-bubbles .container .floating-img.left {
    top: 8rem;
    left: -16.0625rem;
    max-width: 8.8125rem;
}

section.alternative-bubbles .container .floating-img.right {
    top: 5.625rem;
    right: -19.8125rem;
    max-width: 11.5rem;
}

section.alternative-bubbles .container .intro-text {
    display: grid;
    gap: 4.375rem;
}

section.alternative-bubbles .container .featured-img {
    width: 100%;
    max-width: 13.5rem;
    aspect-ratio: 1/1;
    height: auto;
    border-radius: 999px;
    margin-inline: auto;
}

@media only screen and (max-width: 768px) {
    section.alternative-bubbles {
        padding-bottom: 6.25rem;
    }

    section.alternative-bubbles .container {
        gap: 3.125rem;
    }

    section.alternative-bubbles .container .featured-img {
        margin-bottom: 0.625rem;
    }
}

/* ============================ */
/* SEPARATED-TEXT */
/* ============================ */

section.separated-text {
    padding-top: 7.6875rem;
    padding-bottom: 8.3125rem;
}

section.separated-text .container {
    display: grid;
    gap: 12.0625rem;
}

section.separated-text .container .title {
    color: var(--c-blue);
    position: relative;
}

section.separated-text .container .title svg {
    position: absolute;
    bottom: -8.625rem;
    left: -23.4375rem;
}

section.separated-text .container .title strong {
    font-weight: 500;
}

@media only screen and (max-width: 768px) {
    section.separated-text {
        padding-top: 6.25rem;
        padding-bottom: 6.25rem;
        overflow: hidden;
    }

    section.separated-text .container {
        gap: 11.375rem;
    }

    section.separated-text .container .title svg {
        left: -1.25rem;
        bottom: -3.75rem;
        transform: translateY(100%);
    }
}

/* ============================ */
/* BIGGEST TEXT */
/* ============================ */

section.biggest-text {
    background-color: var(--c-blue);
    color: var(--c-white);
    padding-top: 7.5rem;
    padding-bottom: 12.5rem;
}

section.biggest-text .intro .container {
    display: grid;
    gap: 4.375rem;
}

section.biggest-text .separator {
    margin-top: 7.6875rem;
    margin-bottom: 4.9375rem;
    display: flex;
    align-items: end;
    justify-content: end;
}

section.biggest-text .separator svg {
    width: 100%;
    max-width: fit-content;
}

section.biggest-text .content {
    display: grid;
    gap: 8.1875rem;
}

section.biggest-text .content .title-container .title strong,
section.biggest-text .content .title-container .title {
    font-weight: 300;
}

section.biggest-text .content .title-container .title strong {
    color: var(--c-acquamarine);
}

section.biggest-text .content .content-wrapper .container {
    display: flex;
    align-items: end;
    gap: var(--container-gap);
}

section.biggest-text .content .content-wrapper .description {
    max-width: 13.5625rem;
}

section.biggest-text .content .content-wrapper .media-container {
    margin-inline: auto;
}

section.biggest-text .content .content-wrapper .media-container .img-wrapper {
    overflow: hidden;
    border-radius: 0.625rem;
    max-width: 28.375rem;
}

@media only screen and (max-width: 768px) {
    section.biggest-text {
        padding-top: 6.875rem;
        padding-bottom: 6.25rem;
    }

    section.biggest-text .intro .container {
        gap: 3.125rem;
    }

    section.biggest-text .separator {
        justify-content: start;
        margin-block: 4.375rem;
    }

    section.biggest-text .content {
        gap: 3.125rem;
    }

    section.biggest-text .content .title-container .title {
        font-size: 2.625rem;
        line-height: 1.190476;
    }

    section.biggest-text .content .content-wrapper .description {
        max-width: none;
    }

    section.biggest-text .content .content-wrapper .container {
        gap: 3.125rem;
        display: flex;
        flex-direction: column;
        align-items: start;
    }
}

/* ============================ */
/* RACE COUNTDOWN */
/* ============================ */

.race-countdown {
    color: var(--c-white);
    border-radius: 0.5rem;
    padding: 1.875rem;
    padding-top: 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: start;
    flex-direction: column;
    background-color: rgb(from var(--c-blue) r g b / 0.8);
    backdrop-filter: blur(60px);
    width: 14.8125rem;
    gap: 3.75rem;
}

.race-countdown .top {
    display: grid;
    gap: 0.6875rem;
}

.race-countdown .top .title {
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.25;
    color: var(--c-white);
}

.race-countdown .top .subtitle {
    color: var(--c-acquamarine);
    font-weight: 500;
}

.race-countdown .bottom .counter {
    display: flex;
    align-items: start;
    gap: 1.25rem;
}

.race-countdown .bottom .counter > * {
    display: grid;
    gap: 0.3125rem;
}

.race-countdown .bottom .counter > * .number {
    font-size: 1.25rem;
    line-height: 2;
    font-weight: 500;
    position: relative;
}

.race-countdown .bottom .counter > *:not(:last-child) .number::after {
    content: ":";
    position: absolute;
    right: -0.625rem;
    top: 45%;
    transform: translateX(50%) translateY(-50%);
}

.race-countdown .bottom .counter > * .label {
    font-size: 0.625rem;
    font-weight: 400;
    line-height: 1.6;
    text-align: center;
}

.race-running {
    border-radius: 0.5rem;
    overflow: hidden;
    color: var(--c-white);
    width: 14.8125rem;
}

.race-running .top {
    padding: 1.25rem 1.875rem 1.5625rem;
    background-color: rgb(from var(--c-green) r g b / 0.8);
    backdrop-filter: blur(40px);
}

.race-running .top .status p {
    font-weight: 500;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    color: var(--c-acquamarine);
    font-size: 0.625rem;
}

.race-running .top .status p span {
    height: 0.625rem;
    width: 0.625rem;
    background-color: var(--c-acquamarine);
    border-radius: 99px;
}

.race-running .top .title {
    margin-top: 1.25rem;
    margin-bottom: 1.5rem;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.25;
}

.race-running .top .btn-direction {
    justify-content: space-between;
}

.race-running .top .btn-direction .btn-direction-text {
    font-size: 0.6875rem;
}

.race-running .top .btn-direction .btn-direction-icon {
    background-color: transparent;
    outline: 1px solid rgb(from white r g b / 0.15);
    width: 1.8125rem;
    height: 1.8125rem;
}

.race-running .bottom .img-wrapper {
    height: 7.625rem;
}

@media only screen and (max-width: 768px) {
    .race-container {
        --_fold-height: 6rem;
        position: absolute;
        bottom: 0;
        z-index: 1;
    }
	
	.race-running {
		--_fold-height: 7rem;
	}

    .race-running,
    .race-countdown {
        background-color: var(--c-blue);
        width: auto;
        padding: 1.25rem 2.5rem;
        border-radius: 2.5rem;
        gap: 0.9375rem;
        align-items: stretch;
        transition: max-height 0.3s ease;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
        overflow: hidden;
        max-height: var(--_fold-height);
    }

    .race-running .top {
        padding: 0;
        background: transparent;
    }

	.race-running .top .title,
    .race-countdown .top .title {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

	.race-running .top .title p,
    .race-countdown .top .title p {
        flex-grow: 1;
    }

    .race-countdown.open {
        max-height: 12.5rem;
    }
	
	.race-running.open {
		max-height: 11.5rem;
	}

	.race-running .top .title svg,
    .race-countdown .top .title svg {
        transition: rotate 0.3s ease;
    }

	.race-running.open .top .title svg,
    .race-countdown.open .top .title svg {
        rotate: 0.5turn;
    }
	
	.race-running .bottom {
		display: none;
	}
	
	.race-running .top .btn-direction {
		justify-content: start;
		gap: 1rem;
	}
}

/* ============================ */
/* MENU */
/* ============================ */

#menu[open] {
    border: none;
    margin-left: auto;
    height: 100%;
    max-height: none;
    width: 100%;
    max-width: 37rem;
    transform: translateX(100%);
    animation: slide-in-right 0.3s ease forwards;
}

#menu .dialog-wrapper {
    --_menu-bg: var(--c-blue);
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 1.0625rem;
    color: var(--c-white);
    background-color: var(--_menu-bg);
    padding-inline: var(--container-x-padding);
    padding-top: 3.6875rem;
    padding-bottom: 4.6875rem;
    height: 100%;
}

#menu::backdrop {
    opacity: 0;
}

#menu[open].closing {
    animation: slide-out-right 0.3s ease forwards;
}

@keyframes slide-in-right {
    100% {
        transform: translateX(0%);
    }
}

@keyframes slide-out-right {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(100%);
    }
}

#menu[open] .btn-wrapper {
    display: flex;
    align-items: center;
    justify-content: end;
}

#menu[open] .btn-wrapper .logo {
    margin-right: auto;
}

#menu[open] #menu-closer {
    border-radius: 999px;
    height: 3.75rem;
    width: 3.75rem;
    transform: rotate(45deg);
    display: grid;
    place-items: center;
}

#menu[open] #menu-closer svg {
    --_size: 1.3rem;
    height: var(--_size);
    width: var(--_size);
}

#menu[open] nav {
    max-width: 27rem;
    margin-inline: auto;
    display: flex;
    align-items: center;
}

#menu[open] nav ul {
    list-style-type: none;
}

#menu[open] nav > ul > li > .submenu-head a,
#menu[open] nav > ul > li > a {
    padding-block: 1.34375rem;
    display: block;
}

#menu[open] nav > ul > li:first-child > .submenu-head a,
#menu[open] nav > ul > li:first-child > a {
    padding-top: 0;
}

#menu[open] nav > ul > li:last-child > .submenu-head a,
#menu[open] nav > ul > li:last-child > a {
    padding-bottom: 0;
}

#menu[open] nav > ul > li > .submenu-head a,
#menu[open] nav > ul > li > a {
    font-size: 1.5625rem;
    line-height: 1.4;
    font-weight: 500;
}

#menu[open] nav > ul > li .submenu-head {
    display: flex;
    align-items: center;
    gap: 2.6875rem;
}

#menu[open] nav > ul > li .submenu-head button {
    flex-shrink: 0;
    height: 2.8125rem;
    width: 2.8125rem;
    border: 1px solid rgb(255 255 255 / 0.1);
    border-radius: 999px;
    transition: transform 0.3s ease;
    display: grid;
    place-items: center;
}

#menu[open] nav > ul > li:has(.submenu:not([inert])) .submenu-head button {
    transform: rotate(45deg);
}

#menu[open] nav > ul > li .submenu {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.3s ease;
}

#menu[open] nav > ul > li .submenu > * {
    overflow: hidden;
}

#menu[open] nav > ul > li .submenu[inert] {
    grid-template-rows: 0fr;
}

#menu[open] nav > ul > li .submenu {
    font-size: 0.875rem;
    line-height: 1.714286;
}

#menu[open] nav > ul > li .submenu li a {
    display: block;
    padding-block: 0.4375rem;
}

#menu[open] nav > ul > li .submenu li a:focus-visible {
    background-color: hsl(from var(--_menu-bg) h s calc(l + 5));
}

#menu[open] nav > ul > li .submenu li:first-child a {
    padding-top: 1rem;
}

#menu[open] nav > ul > li .submenu li:last-child a {
    padding-bottom: 1.5rem;
}

@media only screen and (max-width: 768px) {
    #menu .dialog-wrapper {
        padding-block: 4.6875rem;
        gap: 0;
        padding-block-end: 0;
        grid-template-rows: auto minmax(0, 1fr) auto;
    }
    
    #menu .dialog-wrapper .btn-wrapper {
        margin-bottom: 3.5rem;
    }

    #menu[open] #menu-closer svg {
        width: 1.25rem;
        height: 1.25rem;
    }

    #menu[open] nav {
        align-items: start;
        margin-inline: 0;
        padding-bottom: 2rem;
        overflow: auto;
        scrollbar-width: none;
    }

    #menu[open] nav > ul > li > .submenu-head a,
    #menu[open] nav > ul > li > a {
        font-size: 1.25rem;
        line-height: 1.4;
    }

    #menu[open] nav > ul > li .submenu {
        padding-left: 1.875rem;
        font-size: 1rem;
        line-height: 1.5625;
    }

    #menu[open] nav > ul > li .submenu li a {
        padding-block: 0.78125rem;
    }
    
        #menu .languages-list {
        padding-block: 1.6875rem;
        display: flex;
        gap: 2rem;
        align-items: center;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        margin-left: calc(-1 * var(--container-x-padding));
        padding-left: var(--container-x-padding);
        overflow: auto;
        width: calc(100% + var(--container-x-padding) + var(--container-x-padding));
        padding-right: var(--container-x-padding);
        scrollbar-width: none;
    }

    #menu .languages-list::-webkit-scrollbar {
        display: none;
    }

    #menu .languages-list .lang {
        font-size: 0.875rem;
        line-height: 1.214286;
        font-weight: 500;
        color: rgba(from currentColor r g b / 0.4);
    }

    #menu .languages-list .lang.lang-active {
        color: currentColor;
    }

}

/* ============================ */
/* BANNER FORM */
/* ============================ */

section.banner.banner-form .layers .layer-bg {
    position: relative;
}

section.banner.banner-form .layers .layer-bg::after {
    content: "";
    position: absolute;
    top: 0;
    height: 6.375rem;
    width: 100%;
    left: 0;
    background-image: linear-gradient(var(--c-white), transparent);
}

section.banner.banner-form .layers .layer-bg .img-wrapper {
    height: 100%;
    overflow: hidden;
}

section.banner.banner-form .layers .layer-fg {
    padding-block: 14.875rem;
    color: var(--c-white);
}

section.banner.banner-form .layers .layer-fg .form-container {
    max-width: 57.875rem;
    margin-inline: auto;
    background-color: rgb(from var(--c-blue) r g b / 0.5);
    backdrop-filter: blur(70px);
    border-radius: 1.25rem;
    padding: 5.25rem 1.5rem 5.625rem;
}

section.banner.banner-form .layers .layer-fg .form-container .form-content {
    max-width: 43.125rem;
    margin-inline: auto;
}

section.banner.banner-form .layers .layer-fg .form-container .form-content .title {
    text-transform: uppercase;
    font-weight: 350;
}

section.banner.banner-form .layers .layer-fg .form-container .form-content .subtitle {
    margin-top: 0.5rem;
    font-weight: 500;
}

section.banner.banner-form .layers .layer-fg .form-container .form-content .description {
    margin-top: 2.625rem;
    margin-bottom: 3.4375rem;
}

section.banner.banner-form .layers .layer-fg .form-container .form-content .form-wrapper form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    row-gap: 1.5625rem;
}

section.banner.banner-form .layers .layer-fg .form-container .form-content .form-wrapper form label {
    display: grid;
    gap: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.714286;
    font-weight: 600;
}

section.banner.banner-form .layers .layer-fg .form-container .form-content .form-wrapper form .wpcf7-acceptance .wpcf7-list-item {
    margin: 0;
}

section.banner.banner-form .layers .layer-fg .form-container .form-content .form-wrapper form .wpcf7-acceptance label {
    font-size: 0.75rem;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 0.5625rem;
}

section.banner.banner-form .layers .layer-fg .form-container .form-content .form-wrapper form .wpcf7-form-control {
    width: 100%;
}

section.banner.banner-form .layers .layer-fg .form-container .form-content .form-wrapper form p:has(> input[type="submit"]) {
    position: relative;
}

section.banner.banner-form .layers .layer-fg .form-container .form-content .form-wrapper .wpcf7-response-output {
    margin: 0;
    grid-column: -1 / 1;
    padding: 1rem;
    text-align: center;
    border-radius: 0.625rem;
}

section.banner.banner-form .layers .layer-fg .form-container .form-content .form-wrapper .wpcf7-not-valid-tip {
    color: #f97171;
}

section.banner.banner-form .layers .layer-fg .form-container .form-content .form-wrapper form p:has(> input[type="submit"]) .wpcf7-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}

@media only screen and (max-width: 768px) {
    section.banner.banner-form .layers {
        display: flex;
        flex-direction: column;
    }

    section.banner.banner-form .layers .layer-bg .img-wrapper {
        height: auto;
    }

    section.banner.banner-form .layers .layer-bg .img-wrapper img {
        position: static;
    }

    section.banner.banner-form .layers .layer-fg {
        padding-top: 0;
        padding-bottom: 0;
    }

    section.banner.banner-form .layers .layer-fg .container {
        padding: 0;
    }

    section.banner.banner-form .layers .layer-fg .form-container {
        border-radius: 0;
        background-color: var(--c-blue);
        padding: 6.25rem var(--container-x-padding);
    }

    section.banner.banner-form .layers .layer-fg .form-container .form-content .title {
        font-weight: 400;
        font-size: 1.5rem;
        text-wrap: balance;
    }

    section.banner.banner-form .layers .layer-fg .form-container .form-content .description {
        margin-top: 2.5rem;
        margin-bottom: 3.125rem;
    }

    section.banner.banner-form .layers .layer-fg .form-container .form-content .form-wrapper form {
        display: grid;
        grid-template-columns: 1fr;
        row-gap: 1.25rem;
    }
}

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

footer {
    margin-top: -1px;
    color: var(--c-white);
    background-color: var(--c-black);
}

footer .top {
    padding-top: 3.125rem;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--container-gap);
    align-items: center;
}

footer .socials ul {
    display: flex;
    align-items: center;
    gap: var(--container-gap);
}

footer .socials ul li a {
    display: block;
    height: 3.375rem;
    width: 3.375rem;
    border-radius: 99px;
    border: 1px solid rgb(255 255 255 / 0.1);
    background-color: rgb(255 255 255 / 0.01);
    display: grid;
    place-items: center;
}

footer .socials ul li a img {
    max-height: 1.25rem;
    max-width: 1.25rem;
}

footer .logo,
footer .logo img {
    max-width: 15rem;
    margin-inline: auto;
}

footer .top .link {
    justify-self: end;
}

footer .center {
    margin-top: 10.6875rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--container-gap);
    padding-bottom: 4.75rem;
}

footer .center .texts {
    grid-column: span 2;
    max-width: 20.9375rem;
}

footer .center .texts .title {
    margin-bottom: 1lh;
    font-weight: 500;
}

footer .center .texts .description {
    margin-bottom: 4.3125rem;
    font-weight: 500;
}

footer .center .texts .link .btn-direction .btn-direction-text {
    font-size: 0.6875rem;
}

footer .center .texts .link .btn-direction .btn-direction-icon {
    background-color: transparent;
    outline: 1px solid rgb(from white r g b / 0.15);
    width: 2.8125rem;
    height: 2.8125rem;
}

footer .center .menu {
    height: fit-content;
    display: grid;
    gap: 1.5625rem;
    font-weight: 500;
}

footer .center .menu .menu-title {
    text-transform: uppercase;
}

footer .bottom {
    gap: var(--container-gap);
    border-top: 1px dashed rgb(from var(--c-acquamarine) r g b / 0.5);
    padding-top: 2.8125rem;
    padding-bottom: 3.3125rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.75rem;
    flex-wrap: wrap;
    row-gap: 1.6875rem;
}

@media only screen and (max-width: 768px) {
    footer .top {
        padding-top: 5rem;
        display: flex;
        justify-content: center;
    }

    footer .top > .logo {
        max-width: 11.0625rem;
    }

    footer .top > *:not(.logo) {
        display: none;
    }

    footer .center {
        margin-top: 5rem;
        padding-bottom: 0;
        display: flex;
        flex-direction: column;
        gap: 3.125rem;
    }

    footer .center .texts .description {
        margin-bottom: 1rem;
    }

    footer .side-wrapper {
        display: grid;
        grid-template-columns: 1fr auto;
        padding-bottom: 4.5rem;
    }

    footer .side-wrapper .side {
        margin-top: auto;
    }

    footer .side-wrapper .socials ul {
        display: flex;
        flex-direction: column;
    }

    footer .bottom {
        padding-top: 3.75rem;
        padding-bottom: 6.25rem;
    }
}

/* ============================ */
/* BANNER SECTION TITLE */
/* ============================ */

section.banner.banner-section-title {
    overflow: hidden;
}

section.banner.banner-section-title .layers .layer-bg .img-wrapper {
    height: 100%;
}

section.banner.banner-section-title .layers .layer-fg {
    padding-block: 13.6875rem;
    background-color: rgb(from #000000 r g b / 0.1);
}

@media only screen and (max-width: 768px) {
    section.banner.banner-section-title .layers .layer-fg {
        padding-top: 13.8125rem;
        padding-bottom: 11.375rem;
    }

    section.banner.banner-section-title .layers .layer-fg .section-title {
        text-transform: uppercase;
        color: var(--c-acquamarine);
        font-weight: 500;
        max-width: 9.1875rem;
        position: relative;
    }

    section.banner.banner-section-title .layers .layer-fg .section-title svg {
        position: absolute;
        top: -39px;
        left: -20px;
    }
}

.page-template-cookie-policy .description #CookieDeclarationUserStatusLabelConsentId {
    word-break: break-all;
}

/* ============================ */
/* HERO NEWS */
/* ============================ */

section.hero.hero-news .layers {
    min-height: 100vh;
    min-height: 100svh;
}

section.hero.hero-news .layers .layer-bg .img-wrapper {
    height: 100%;
}

section.hero.hero-news .layers .layer-fg {
    padding-bottom: 6.25rem;
    background-color: rgb(0 0 0 / 0.3);
    color: var(--c-white);
}

section.hero.hero-news .layers .layer-fg .container {
    height: 100%;
}

section.hero.hero-news .layers .layer-fg .container .zones {
    height: 100%;
    display: grid;
    grid-template-rows: 1fr auto 1fr;
    gap: 2rem;
}

section.hero.hero-news .layers .layer-fg .container .zones .zone.zone-info {
    grid-row: 2;
    align-self: center;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
}

section.hero.hero-news .layers .layer-fg .container .zones .zone.zone-info .date {
    text-align: center;
    font-size: 0.75rem;
    line-height: 1.5;
}

section.hero.hero-news .layers .layer-fg .container .zones .zone.zone-title {
    grid-row: 3;
    display: grid;
    grid-template-columns: 1fr minmax(0, 57.875rem) 1fr;
    gap: 1rem;
    align-self: end;
    align-items: end;
}

section.hero.hero-news .layers .layer-fg .container .zones .zone.zone-title .title {
    grid-column: 2;
    font-weight: 500;
}

section.hero.hero-news .layers .layer-fg .container .zones .zone.zone-title .cta {
    grid-column: 3;
}

@media only screen and (max-width: 1200px) {
    section.hero.hero-news .layers .layer-fg {
        padding-bottom: 3.3125rem;
        background-image: linear-gradient(to top, var(--c-black), rgb(from var(--c-black) r g b / 0.4) 63%, rgb(from var(--c-black) r g b / 0.6) 100%);
    }

    section.hero.hero-news .layers .layer-fg .container .zones {
        display: flex;
        flex-direction: column;
        gap: 3.125rem;
        justify-content: end;
        align-items: revert;
    }

    section.hero.hero-news .layers .layer-fg .container .zones .zone.zone-title .cta {
        display: none;
    }

    section.hero.hero-news .layers .layer-fg .container .zones .zone.zone-info #breadcrumbs > svg:last-child {
        display: none;
    }

    section.hero.hero-news .layers .layer-fg .container .zones .zone.zone-info {
        align-self: auto;
    }

    section.hero.hero-news .layers .layer-fg .container .zones .zone.zone-info .date {
        display: none;
    }

    section.hero.hero-news .layers .layer-fg .container .zones .zone.zone-info {
        display: block;
    }

    section.hero.hero-news .layers .layer-fg .container .zones .zone.zone-title {
        display: block;
    }
}

/* ============================ */
/* ARTICLE BLOCKS */
/* ============================ */

section.article-block[data-name="text"] {
    margin-block: 6.25rem;
}

section.article-block[data-name="text"] .container {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 4rem;
}

section.article-block[data-name="text"] .container .title .fs-title-5 {
    font-weight: 500;
}

section.article-block[data-name="text"] .container .title .fs-title-1 {
    font-weight: 300;
}

section.article-block[data-name="video"] {
    margin-block: 6.25rem;
}

section.article-block[data-name="video"] .container {
    display: grid;
    gap: 2.125rem;
}

section.article-block[data-name="video"] .container .title {
    font-weight: 500;
}

section.article-block[data-name="side_img"] {
    margin-block: 6.25rem;
}

section.article-block[data-name="side_img"] .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--container-gap);
    align-items: center;
}

section.article-block[data-name="side_img"] .container .description {
    max-width: 20.9375rem;
}

section.article-block[data-name="side_img"] .container .img-wrapper {
    aspect-ratio: 453/352;
    border-radius: 0.625rem;
    overflow: hidden;
    height: auto;
}

section.article-block[data-name="side_img"]:nth-child(even of section.article-block[data-name="side_img"]) .container .description {
    order: -1;
    margin-left: right;
}

section.article-block[data-name="side_img"]:nth-child(odd of section.article-block[data-name="side_img"]) .container .description {
    margin-left: auto;
}

section.article-block[data-name="img"] {
    margin-block: 6.25rem;
}

section.article-block[data-name="img"] .img-wrapper {
    border-radius: 0.625rem;
    overflow: hidden;
}

@media only screen and (max-width: 768px) {
    section.article-block[data-name="side_img"],
    section.article-block[data-name="video"],
    section.article-block[data-name="text"] {
        margin-block: 2.5rem;
    }

    section.article-block[data-name="side_img"] .container,
    section.article-block[data-name="video"] .container,
    section.article-block[data-name="text"] .container {
        gap: 2.5rem;
    }

    section.article-block[data-name="side_img"] .container {
        display: flex;
        flex-direction: column;
    }

    section.article-block[data-name="side_img"] .container .img-wrapper {
        order: -2;
        width: 100%;
        height: auto;
        aspect-ratio: 335 / 260;
    }

    section.article-block[data-name="side_img"]:nth-child(n of section.article-block[data-name="side_img"]) .container .description {
        margin-left: 0;
        margin-right: 0;
    }

    section.article-block[data-name="side_img"] .container .description {
        max-width: none;
    }
}

/* ============================ */
/* CARD NEWS */
/* ============================ */

article.card.card-news {
    position: relative;
    isolation: isolate;
    container: card-news / inline-size;
}

article.card.card-news .card-img {
    aspect-ratio: 374/281;
    height: auto;
    border-radius: 0.375rem;
    overflow: hidden;
}

article.card.card-news .card-title {
    font-weight: 500;
    font-size: 0.9375rem;
    line-height: 1.466667;
    margin-top: 0.625rem;
}

article.card.card-news .card-title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
}

article.card.card-news .card-date {
    margin-top: 0.8125rem;
    font-size: 0.75rem;
    line-height: 1.5;
}

article.card.card-news .card-latest {
    position: absolute;
    top: 2.0625rem;
    left: 1.875rem;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-weight: 500;
    color: white;
}

article.card.card-news .card-latest span {
    width: 0.6875rem;
    height: 0.6875rem;
    background-color: currentColor;
    border-radius: 99px;
}

@container card-news (width > 473px) {
    article.card.card-news .card-title {
        margin-top: 1.4375rem;
        font-size: 1.5625rem;
        line-height: 1.28;
    }

    article.card.card-news .card-img {
        aspect-ratio: 572/352;
    }

    article.card.card-news .card-date {
        margin-top: 0.9375rem;
    }
}

@media (max-width: 768px) {
    article.card.card-news .card-latest {
        top: 1.25rem;
        left: 1.25rem;
    }
}

/* ============================ */
/* NEWS ARCHIVE */
/* ============================ */

section.archive-news {
    padding-block-start: 9.375rem;
    padding-block-end: 10.25rem;
}

section.archive-news .container {
    display: grid;
    gap: 12.1875rem;
}

section.archive-news .latest-cards {
    display: grid;
    --grid-item-width: 31.25rem;
    grid-template-columns: repeat(auto-fill, minmax(var(--grid-item-width), 1fr));
    grid-template-columns: repeat(auto-fill, minmax(min(var(--grid-item-width), 100%), 1fr));
    gap: 1.3125rem;
    row-gap: 5rem;
}

section.archive-news .latest-cards:not(:has(.card)) {
    display: none;
}

section.archive-news .cards-wrapper {
    display: grid;
    --grid-item-width: 21.25rem;
    grid-template-columns: repeat(auto-fill, minmax(var(--grid-item-width), 1fr));
    grid-template-columns: repeat(auto-fill, minmax(min(var(--grid-item-width), 100%), 1fr));
    gap: 1.3125rem;
    row-gap: 5rem;
}

@media (max-width: 768px) {
    section.archive-news {
        padding-block-start: 3.75rem;
        padding-block-end: 3.75rem;
    }

    section.archive-news .container {
        gap: 5rem;
    }
}

/* ============================ */
/* EG PAGINATION */
/* ============================ */

#eg-pagination {
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}

#eg-pagination[aria-hidden="true"] {
    display: none;
}

#eg-pagination .page-btn:disabled,
#eg-pagination .page-separator,
#eg-pagination .page:not(.page-current) {
    opacity: 0.4;
}

#eg-pagination .page-btn.page-btn-next {
    margin-left: 1.875rem;
}

#eg-pagination .page-btn.page-btn-prev {
    margin-right: 1.875rem;
}

#eg-pagination .page-btn.page-btn-prev {
    rotate: 180deg;
}

#eg-pagination :disabled {
    pointer-events: none;
}

/* ============================ */
/* WEB SERIE EPISODE */
/* ============================ */

section.single-web-serie-episode {
    padding-block-start: 19.0625rem;
    padding-block-end: 13.3125rem;
    background-color: var(--c-blue);
    color: var(--c-white);
    overflow: hidden;
}

section.single-web-serie-episode .hero .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
        "breadcrumb serie"
        "episode title";
    column-gap: var(--container-gap);
    row-gap: 3.625rem;
}

section.single-web-serie-episode .hero .container .title {
    grid-area: title;
}

section.single-web-serie-episode .hero .container .serie-name {
    grid-area: serie;
    font-weight: 500;
}

section.single-web-serie-episode .video .container .video-info .data .episode-number,
section.single-web-serie-episode .hero .container .episode-number {
    width: fit-content;
    padding: 0.375rem 0.9375rem;
    font-weight: 500;
    border: 1px solid rgb(from var(--c-white) r g b / 0.1);
    height: fit-content;
    border-radius: 9999px;
}

section.single-web-serie-episode .hero .container .episode-number {
    grid-area: episode;
    align-self: end;
    justify-self: end;
}

section.single-web-serie-episode .hero .container #breadcrumbs {
    grid-area: breadcrumb;
}

section.single-web-serie-episode .video {
    margin-top: 6.875rem;
}

section.single-web-serie-episode .video .container {
    display: grid;
    gap: 3.5rem;
}

section.single-web-serie-episode .video .container .video-info {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: var(--container-gap);
}

section.single-web-serie-episode .video .container .video-info .data {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 1.375rem;
}

section.single-web-serie-episode .video .container .video-info .description {
    max-width: 28.625rem;
}

@media (max-width: 768px) {
    section.single-web-serie-episode {
        padding-top: 19.25rem;
        padding-bottom: 5.625rem;
    }

    section.single-web-serie-episode .hero .container #breadcrumbs svg {
        top: 0;
        left: -230px;
    }

    section.single-web-serie-episode .hero .container {
        display: grid;
        gird-template-columns: repeat(2, 1fr);
        gap: 2.5rem;
        grid-template-areas:
            "breadcrumb breadcrumb"
            "serie episode"
            "title title";
    }

    section.single-web-serie-episode .hero .container #breadcrumbs {
        margin-bottom: 3.75rem;
    }

    section.single-web-serie-episode .video {
        margin-top: 3.75rem;
    }

    section.single-web-serie-episode .video .container .video-info {
        display: flex;
        flex-direction: column;
    }

    section.single-web-serie-episode .video .container .video-info .data {
        display: none;
    }

    section.single-web-serie-episode .video .container {
        gap: 3.125rem;
    }
}

/* ============================ */
/* VIDEO PLAYER */
/* ============================ */

.video-player {
    position: relative;
    overflow: hidden;
    border-radius: 0.625rem;
}

.video-player button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease 0s;
}

.video-player button.not-visible {
    opacity: 0;
}

.video-player button::after {
    content: "";
    position: absolute;
    inset: 0;
}

.video-player .video-content[data-state="playing"] button.btn-play,
.video-player .video-content[data-state="paused"] button.btn-stop {
    pointer-events: none;
    opacity: 0;
}

.video-player .video-content video {
    height: 0;
    min-height: 100%;
    object-fit: cover;
    cursor: pointer;
}

.video-player iframe {
    aspect-ratio: 16/9;
}

/* ============================ */
/* WEB SERIE CHIP */
/* ============================ */

.web-serie-chip {
    padding: 0.34375rem 0.6875rem;
    font-size: 0.8125rem;
    line-height: 1.923077;
    font-weight: 500;
    grid-column: 1;
    grid-row: 1;
    background-color: var(--c-acquamarine);
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--c-black);
    border-radius: 0.3125rem;
    margin: 0.375rem;
    position: relative;
    align-self: start;
    justify-self: start;
}

/* ============================ */
/* CARD WEB SERIE */
/* ============================ */

article.card.card-web-serie {
    height: fit-content;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    position: relative;
}

article.card.card-web-serie .card-episode {
    grid-column: 2;
    grid-row: 1;
    padding-top: 0.625rem;
    padding-right: 1.875rem;
    font-size: 0.875rem;
    line-height: 1.571429;
    font-weight: 500;
    position: relative;
    align-self: start;
    justify-self: end;
}

article.card.card-web-serie .img-wrapper {
    width: 0;
    min-width: 100%;
    grid-column: -1/1;
    grid-row: 1;
    height: auto;
    aspect-ratio: 374/281;
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzc1IiBoZWlnaHQ9IjI4MiIgdmlld0JveD0iMCAwIDM3NSAyODIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0wLjg3NSA2LjA2OTUxVjI3NS4wN0MwLjg3NSAyNzguMzgzIDMuNTYxMjkgMjgxLjA3IDYuODc1IDI4MS4wN0gzNjguODc1QzM3Mi4xODkgMjgxLjA3IDM3NC44NzUgMjc4LjM4MyAzNzQuODc1IDI3NS4wN1Y1Ni42OTI4QzM3NC44NzUgNTMuMzc5MSAzNzIuMTg5IDUwLjY5MjggMzY4Ljg3NSA1MC42OTI4SDMwNC4yNThDMzAwLjAxOCA1MC42OTI4IDI5NS45NTEgNDkuMDA5NiAyOTIuOTUxIDQ2LjAxMjhMMjUxLjY0MSA0Ljc0OTUyQzI0OC42NDEgMS43NTI3OCAyNDQuNTc0IDAuMDY5NTE5IDI0MC4zMzQgMC4wNjk1MTlINi44NzVDMy41NjEyOSAwLjA2OTUxOSAwLjg3NSAyLjc1NTggMC44NzUgNi4wNjk1MVoiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgo=");
    mask-size: 100%;
}

article.card.card-web-serie .card-title {
    grid-column: -1/1;
    grid-row: 2;
    margin-top: 0.625rem;
    font-size: 0.9375rem;
    line-height: 1.466667;
    font-weight: 500;
}

article.card.card-web-serie .card-title a::after {
    content: "";
    position: absolute;
    inset: 0;
}

/* ============================ */
/* TAXONOMY SERIE */
/* ============================ */

section.taxonomy-serie {
    background-color: var(--c-blue);
    color: var(--c-white);
    padding-top: 10.125rem;
    padding-bottom: 14.875rem;
}

section.taxonomy-serie .trailer .container .title {
    margin-bottom: 4.1875rem;
    font-weight: 500;
}

section.taxonomy-serie .trailer .container .content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--container-gap);
}

section.taxonomy-serie .trailer .container .content .img-wrapper {
    height: auto;
    aspect-ratio: 572/430;
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzc1IiBoZWlnaHQ9IjI4MiIgdmlld0JveD0iMCAwIDM3NSAyODIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0wLjg3NSA2LjA2OTUxVjI3NS4wN0MwLjg3NSAyNzguMzgzIDMuNTYxMjkgMjgxLjA3IDYuODc1IDI4MS4wN0gzNjguODc1QzM3Mi4xODkgMjgxLjA3IDM3NC44NzUgMjc4LjM4MyAzNzQuODc1IDI3NS4wN1Y1Ni42OTI4QzM3NC44NzUgNTMuMzc5MSAzNzIuMTg5IDUwLjY5MjggMzY4Ljg3NSA1MC42OTI4SDMwNC4yNThDMzAwLjAxOCA1MC42OTI4IDI5NS45NTEgNDkuMDA5NiAyOTIuOTUxIDQ2LjAxMjhMMjUxLjY0MSA0Ljc0OTUyQzI0OC42NDEgMS43NTI3OCAyNDQuNTc0IDAuMDY5NTE5IDI0MC4zMzQgMC4wNjk1MTlINi44NzVDMy41NjEyOSAwLjA2OTUxOSAwLjg3NSAyLjc1NTggMC44NzUgNi4wNjk1MVoiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgo=");
    mask-size: 100%;
}

section.taxonomy-serie .trailer .container .content .text {
    max-width: 28.375rem;
    margin-inline-start: auto;
    gap: 1.875rem;
    display: flex;
    flex-direction: column;
    align-items: start;
    margin-top: 12%;
}

section.taxonomy-serie .trailer .container .content .text .episodes-number {
    font-weight: 500;
    font-size: 0.75rem;
    line-height: 1.5;
}

section.taxonomy-serie .trailer .container .content .text .trailer-title {
    font-weight: 500;
}

section.taxonomy-serie .trailer .container .content .text .btn {
    margin-top: auto;
}

section.taxonomy-serie dialog {
    margin: auto;
    width: auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    max-width: min(100% - 2rem, 100rem);
    max-height: 80vh;
    background-color: transparent;
    border: none;
}

section.taxonomy-serie dialog::backdrop {
    backdrop-filter: blur(50px);
    background-color: rgb(from var(--c-black) r g b / 0.5);
}

@media (max-width: 850px) {
    section.taxonomy-serie {
        padding-bottom: 8.625rem;
        padding-top: 1.6875rem;
    }

    section.taxonomy-serie .trailer .container .title {
        margin-bottom: 2.75rem;
    }

    section.taxonomy-serie .trailer .container .content {
        display: flex;
        flex-direction: column;
    }

    section.taxonomy-serie .trailer .container .content .text {
        margin-top: 0;
        margin: 0;
        max-width: none;
    }

    section.taxonomy-serie .swiper .swiper-wrapper {
        display: grid;
        --grid-item-width: 21.25rem;
        grid-template-columns: repeat(auto-fill, minmax(var(--grid-item-width), 1fr));
        grid-template-columns: repeat(auto-fill, minmax(min(var(--grid-item-width), 100%), 1fr));
        gap: 1.3125rem;
        row-gap: 5rem;
    }

    section.taxonomy-serie section.simple-slider .swiper .controls {
        display: none;
    }

    section.simple-slider[data-card="web-serie"] .swiper .swiper-wrapper .swiper-slide {
        width: auto !important;
    }

    .next-episodes section.simple-slider[data-card="web-serie"] .swiper .swiper-wrapper .swiper-slide {
        width: 80vw !important;
    }
}

/* ============================ */
/* SINGLE RACING */
/* ============================ */

section.single-racing {
    padding-top: 19.5rem;
    padding-bottom: 11.625rem;
    background-color: var(--c-blue);
    color: var(--c-white);
}

section.single-racing .hero {
    display: grid;
    gap: 2.875rem;
    overflow: hidden;
}

section.single-racing .hero .top .container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
}

section.single-racing .hero .top .active-label {
    text-align: center;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    color: var(--c-acquamarine);
    font-weight: 500;
    font-size: 0.625rem;
    line-height: 1.6;
    text-transform: uppercase;
}

section.single-racing .hero .top .active-label span {
    height: 0.625rem;
    width: 0.625rem;
    border-radius: 6.1875rem;
    background-color: currentColor;
}

section.single-racing .hero .bottom .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--container-gap);
    align-items: end;
}

section.single-racing .hero .bottom .img-wrapper {
    height: auto;
    aspect-ratio: 572/336;
    border-radius: 0.625rem;
    overflow: hidden;
}

section.single-racing .hero .bottom .text {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 2.625rem;
    max-width: 27.8125rem;
}

section.single-racing .hero .bottom .text .title {
    font-weight: 500;
}

section.single-racing .hero .bottom .text .date {
    color: var(--c-acquamarine);
    font-weight: 500;
}

section.single-racing .hero .bottom .text .description {
    margin-top: 2.25rem;
}

section.single-racing .informations {
    margin-top: 8.625rem;
}

section.single-racing .informations .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--container-gap);
}

section.single-racing .informations .container .img-wrapper {
    overflow: hidden;
    border-radius: 0.625rem;
    max-width: 28.3125rem;
    height: fit-content;
}

section.single-racing .informations .container .text .title {
    font-weight: 500;
    margin-bottom: 4.375rem;
}

section.single-racing .informations .container .text .table .rows {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    column-gap: var(--container-gap);
}

section.single-racing .informations .container .text .table .rows .row {
    padding-block: 1.25rem;
    border-bottom: 1px solid rgb(from currentColor r g b / 0.2);
    display: grid;
    grid-template-columns: subgrid;
    grid-column: -1/1;
}

section.single-racing .informations .container .text .table .rows .row:first-child {
    padding-top: 0;
}

section.single-racing .informations .container .text .table .rows .row > p:first-child {
    color: var(--c-acquamarine);
}

section.single-racing .informations .container .text .table .rows .row .list-wrapper > p,
section.single-racing .informations .container .text .table .rows .row p:not(:first-child) {
    font-weight: 500;
}

section.single-racing .informations .container .text .table .rows .row:has(.list-wrapper) > p:has(> span > svg),
section.single-racing .informations .container .text .table .rows .row p:has(> span > svg) {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

section.single-racing .informations .container .text .table .rows .row .list-wrapper ul {
    list-style-type: disc;
    list-style-position: inside;
    padding-left: 2em;
}

section.single-racing .informations .container .text .table .rows .row .list-wrapper ul li::marker {
    font-size: 0.5em;
}

section.single-racing .informations .container .text .cta {
    margin-top: 3.125rem;
}

section.single-racing .results {
    margin-top: 8.5rem;
}

section.single-racing .results .container {
    display: grid;
    gap: 6.25rem;
}

section.single-racing .results .container .main-title h2 {
    position: relative;
    width: fit-content;
}

section.single-racing .results .container .main-title h2 svg {
    position: absolute;
    top: 1.25rem;
    left: calc(100% + 2.875rem);
}

section.single-racing .results .container .data {
    display: grid;
    --grid-item-width: 21.25rem;
    grid-template-columns: repeat(auto-fill, minmax(var(--grid-item-width), 1fr));
    grid-template-columns: repeat(auto-fill, minmax(min(var(--grid-item-width), 100%), 1fr));
    gap: var(--container-gap);
    row-gap: 2rem;
}

section.single-racing .results .container .data .single {
    display: grid;
    gap: 1.5rem;
}

section.single-racing .results .container .data .single .title {
    font-weight: 500;
}

section.single-racing .results .container .data .single .content {
    color: var(--c-acquamarine);
    font-weight: 300;
}

@media (max-width: 768px) {
    section.single-racing {
        padding-top: 19.25rem;
        padding-inline: var(--container-x-padding);
        padding-bottom: 5rem;
    }

    section.single-racing .hero {
        display: grid;
        grid-template-areas:
            "breadcrumb breadcrumb"
            "date state"
            "title title"
            "img img"
            "description description";
        gap: 0;
    }

    section.single-racing .hero .bottom,
    section.single-racing .hero .bottom .container,
    section.single-racing .hero .top,
    section.single-racing .hero .top .container {
        display: contents;
    }

    section.single-racing .hero .bottom .text {
        max-width: none;
        display: contents;
    }

    section.single-racing .hero .top .container #breadcrumbs {
        grid-area: breadcrumb;
        margin-bottom: 4.4375rem;
    }

    section.single-racing .hero .top .container #breadcrumbs svg {
        left: -200px;
    }

    section.single-racing .hero .top .active-label {
        grid-area: state;
        justify-content: end;
    }

    section.single-racing .hero .bottom .text .title {
        grid-area: title;
        margin-top: 2.5rem;
    }

    section.single-racing .hero .bottom .text .description {
        grid-area: description;
        margin: 0;
    }

    section.single-racing .hero .bottom .img-wrapper {
        grid-area: img;
        margin-block: 3.125rem;
    }

    section.single-racing .informations {
        margin-top: 3.75rem;
    }

    section.single-racing .informations .container {
        display: flex;
        flex-direction: column;
        gap: 4.375rem;
    }

    section.single-racing .informations .container .img-wrapper {
        max-width: none;
    }

    section.single-racing .informations .container .text .title {
        margin-bottom: 2.5rem;
    }

    section.single-racing .informations .container .text .table .rows {
        grid-template-columns: 1fr 3fr;
    }

    section.single-racing .informations .container .text .table .rows .row {
        display: grid;
        grid-template-rows: auto;
    }

    section.single-racing .informations .container .text .table .rows .row:has(> :nth-child(3)) {
        display: grid;
        grid-template-rows: auto auto;
        row-gap: 0.6rem;
    }

    section.single-racing .informations .container .text .table .rows .row > :nth-child(3) {
        grid-column: 2;
    }

    section.single-racing .results {
        overflow: hidden;
    }

    section.single-racing .results svg {
        display: none;
    }

    section.single-racing .results .container {
        gap: 3.125rem;
    }

    section.single-racing .results .container .data .single {
        gap: 1.25rem;
    }

    section.single-racing .results .container .data .single .content .fs-title-1 {
        font-size: 4.375rem;
        line-height: 1.142857143;
    }

    section.single-racing .results .container .data {
        gap: 4.375rem;
    }
}

/* ============================ */
/* RACING SIDE */
/* ============================ */

section.racing-side#archive-racing-side-race {
    margin-top: 4.75rem;
    margin-bottom: 17.875rem;
}

section.racing-side.dark {
    background-color: var(--c-blue);
    color: var(--c-white);
}

section.racing-side .container .title {
    margin-bottom: 4.1875rem;
    font-weight: 500;
}

section.racing-side .container .content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--container-gap);
    position: relative;
}

section.racing-side .container .content .thumbnail {
    position: relative;
}

section.racing-side .container .content .thumbnail .latest {
    position: absolute;
    top: 1.375rem;
    right: 1.5rem;
    font-size: 0.625rem;
    text-transform: uppercase;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    color: var(--c-acquamarine);
}

section.racing-side .container .content .thumbnail .latest .dot {
    height: 0.625rem;
    width: 0.625rem;
    border-radius: 999px;
    background-color: currentColor;
}

section.racing-side .container .content .img-wrapper {
    height: auto;
    aspect-ratio: 572/430;
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzc1IiBoZWlnaHQ9IjI4MiIgdmlld0JveD0iMCAwIDM3NSAyODIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0wLjg3NSA2LjA2OTUxVjI3NS4wN0MwLjg3NSAyNzguMzgzIDMuNTYxMjkgMjgxLjA3IDYuODc1IDI4MS4wN0gzNjguODc1QzM3Mi4xODkgMjgxLjA3IDM3NC44NzUgMjc4LjM4MyAzNzQuODc1IDI3NS4wN1Y1Ni42OTI4QzM3NC44NzUgNTMuMzc5MSAzNzIuMTg5IDUwLjY5MjggMzY4Ljg3NSA1MC42OTI4SDMwNC4yNThDMzAwLjAxOCA1MC42OTI4IDI5NS45NTEgNDkuMDA5NiAyOTIuOTUxIDQ2LjAxMjhMMjUxLjY0MSA0Ljc0OTUyQzI0OC42NDEgMS43NTI3OCAyNDQuNTc0IDAuMDY5NTE5IDI0MC4zMzQgMC4wNjk1MTlINi44NzVDMy41NjEyOSAwLjA2OTUxOSAwLjg3NSAyLjc1NTggMC44NzUgNi4wNjk1MVoiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgo=");
    mask-size: 100%;
}

section.racing-side .container .content .text {
    max-width: 28.375rem;
    margin-inline-start: auto;
    gap: 1.875rem;
    display: flex;
    flex-direction: column;
    align-items: start;
    margin-top: 12%;
}

section.racing-side .container .content .text .title {
    font-weight: 500;
}

section.racing-side .container .content .text .title a::after {
    content: "";
    position: absolute;
    inset: 0;
}

section.racing-side .container .content .text .btn {
    margin-top: auto;
}

@media (max-width: 980px) {
    section.racing-side#archive-racing-side-race {
        margin-bottom: 9.3125rem;
    }

    section.racing-side .container .content {
        display: flex;
        flex-direction: column;
    }

    section.racing-side .container .content .text {
        margin: 0;
        max-width: none;
    }

    section.racing-side .container .content .text .title {
        margin-bottom: 0;
    }
}

/* ============================ */
/* RACES BY YEAR */
/* ============================ */

body.post-type-archive-racing {
    background-color: var(--c-blue);
    color: var(--c-white);
}

section.races-by-year {
    margin-top: 17.875rem;
    margin-bottom: 13.25rem;
}

section.races-by-year .container .years .single-year {
    display: grid;
    grid-template-columns: 3fr 7fr;
    column-gap: var(--container-gap);
}

section.races-by-year .container .years .single-year .year {
    font-weight: 300;
}

section.races-by-year .container .years .single-year .single-racing {
    position: relative;
    display: grid;
    grid-template-columns: 3fr 4fr;
    column-gap: var(--container-gap);
    padding-block: 2.5rem;
    border-bottom: 1px solid currentColor;
}

section.races-by-year .container .years .single-year:first-child .single-racing:first-child {
    padding-top: 0;
}

section.races-by-year .container .years .single-year .single-racing .img-wrapper {
    height: auto;
    border-radius: 0.375rem;
    overflow: hidden;
}

section.races-by-year .container .years .single-year .single-racing .text .info {
    color: var(--c-acquamarine);
    margin-bottom: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 500;
}

section.races-by-year .container .years .single-year .single-racing .text .info .active {
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.625rem;
    line-height: 1.6;
}

section.races-by-year .container .years .single-year .single-racing .text .info .active::before {
    content: "";
    height: 0.625rem;
    width: 0.625rem;
    background-color: currentColor;
    border-radius: 99px;
}

section.races-by-year .container .years .single-year .single-racing .text .title {
    font-weight: 500;
    margin-bottom: 2.4375rem;
}

section.races-by-year .container .years .single-year .single-racing .text .title a::after {
    content: "";
    position: absolute;
    inset: 0;
}

section.races-by-year .container .years .single-year .single-racing .text .description {
    font-size: 0.875rem;
    line-height: 1.642857;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

@media (max-width: 768px) {
    section.races-by-year {
        margin-top: 9.3125rem;
        margin-bottom: 7.5rem;
    }

    section.races-by-year .container .years {
        display: grid;
        gap: 5rem;
    }

    section.races-by-year .container .years .single-year {
        display: flex;
        flex-direction: column;
        gap: 2.5rem;
    }

    section.races-by-year .container .years .single-year .single-racing {
        padding-block: 2.5rem;
        display: flex;
        flex-direction: column;
    }

    section.races-by-year .container .years .single-year .single-racing .text .info {
        margin-bottom: 1.25rem;
    }

    section.races-by-year .container .years .single-year .single-racing .img-wrapper {
        height: auto;
        aspect-ratio: 335/209;
        margin-bottom: 1.25rem;
    }

    section.races-by-year .container .years .single-year .single-racing .text .title {
        margin-bottom: 1.25rem;
    }
}

/* ============================ */
/* WEB SERIE PREVIEW */
/* ============================ */

section.web-serie-preview {
    margin-top: 6.25rem;
    margin-bottom: 10.1875rem;
}

section.web-serie-preview .container .title {
    margin-bottom: 4.1875rem;
    font-weight: 500;
}

section.web-serie-preview .container .content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--container-gap);
}

section.web-serie-preview .container .content .img-wrapper {
    height: auto;
    aspect-ratio: 572/430;
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzc1IiBoZWlnaHQ9IjI4MiIgdmlld0JveD0iMCAwIDM3NSAyODIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0wLjg3NSA2LjA2OTUxVjI3NS4wN0MwLjg3NSAyNzguMzgzIDMuNTYxMjkgMjgxLjA3IDYuODc1IDI4MS4wN0gzNjguODc1QzM3Mi4xODkgMjgxLjA3IDM3NC44NzUgMjc4LjM4MyAzNzQuODc1IDI3NS4wN1Y1Ni42OTI4QzM3NC44NzUgNTMuMzc5MSAzNzIuMTg5IDUwLjY5MjggMzY4Ljg3NSA1MC42OTI4SDMwNC4yNThDMzAwLjAxOCA1MC42OTI4IDI5NS45NTEgNDkuMDA5NiAyOTIuOTUxIDQ2LjAxMjhMMjUxLjY0MSA0Ljc0OTUyQzI0OC42NDEgMS43NTI3OCAyNDQuNTc0IDAuMDY5NTE5IDI0MC4zMzQgMC4wNjk1MTlINi44NzVDMy41NjEyOSAwLjA2OTUxOSAwLjg3NSAyLjc1NTggMC44NzUgNi4wNjk1MVoiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgo=");
    mask-size: 100%;
    isolation: isolate;
}

section.web-serie-preview .container .content .img-wrapper::after {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background-image: linear-gradient(to right, black, transparent);
    opacity: 0.2;
    z-index: 1;
    top: 0;
    left: 0;
}

section.web-serie-preview .container .content .img-wrapper .web-serie-chip {
    z-index: 2;
}

section.web-serie-preview .container .content .img-wrapper .latest {
    z-index: 2;
    position: absolute;
    color: var(--c-white);
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-weight: 500;
    top: 22%;
    right: 1.5rem;
}

section.web-serie-preview .container .content .img-wrapper .latest .dot {
    height: 0.6875rem;
    width: 0.6875rem;
    border-radius: 999px;
    background-color: currentColor;
}

section.web-serie-preview .container .content .text {
    max-width: 28.375rem;
    margin-inline-start: auto;
    gap: 1.875rem;
    display: flex;
    flex-direction: column;
    align-items: start;
    margin-top: 12%;
}

section.web-serie-preview .container .content .text .episodes-number {
    font-weight: 500;
    font-size: 0.75rem;
    line-height: 1.5;
}

section.web-serie-preview .container .content .text .trailer-title {
    font-weight: 500;
}

section.web-serie-preview .container .content .text .btn {
    margin-top: auto;
}

@media (max-width: 768px) {
    section.web-serie-preview {
        margin-top: 3.75rem;
        margin-bottom: 4.5rem;
    }

    section.web-serie-preview .container .content {
        display: flex;
        flex-direction: column;
        gap: 0.4375rem;
    }

    section.web-serie-preview .container .content .text {
        margin-top: 0;
    }

    section.web-serie-preview .container .content .text {
        gap: 1.25rem;
    }
}

/* ============================ */
/* NEWS PREVIEW */
/* ============================ */

.news-preview {
    margin-top: 6.25rem;
    margin-bottom: 10.1875rem;
}

.news-preview .container .title {
    margin-bottom: 4.1875rem;
    font-weight: 500;
}

.news-preview .container .content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--container-gap);
}

.news-preview .container .content .img-wrapper {
    height: auto;
    aspect-ratio: 572/430;
    isolation: isolate;
    border-radius: 0.625rem;
    overflow: hidden;
    order: 2;
}

.news-preview .container .content .img-wrapper::after {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background-image: linear-gradient(to right, black, transparent);
    opacity: 0.2;
    z-index: 1;
    top: 0;
    left: 0;
}

.news-preview .container .content .img-wrapper .web-serie-chip {
    z-index: 2;
}

.news-preview .container .content .img-wrapper .latest {
    z-index: 2;
    position: absolute;
    color: var(--c-white);
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-weight: 500;
    top: 1.875rem;
    left: 2.5rem;
}

.news-preview .container .content .img-wrapper .latest .dot {
    height: 0.6875rem;
    width: 0.6875rem;
    border-radius: 999px;
    background-color: currentColor;
}

.news-preview .container .content .text {
    text-align: end;
    max-width: 28.375rem;
    margin-inline-end: auto;
    gap: 1.875rem;
    display: flex;
    flex-direction: column;
    align-items: end;
}

.news-preview .container .content .text .episodes-number {
    color: var(--c-green);
    font-size: 0.875rem;
    line-height: 1.785714;
    font-weight: 500;
    border-radius: 0.9375rem;
    border: 1px solid rgb(from var(--c-green) r g b / 0.1);
    padding: 0.3125rem 0.9375rem;
}

.news-preview .container .content .text .trailer-title {
    font-weight: 500;
}

.news-preview .container .content .text .btn {
    margin-top: auto;
}

@media (max-width: 768px) {
    .news-preview {
        margin-top: 4.5rem;
        margin-bottom: 5rem;
    }

    .news-preview .container .content {
        gap: 0.9375rem;
        display: flex;
        flex-direction: column-reverse;
    }

    .news-preview .container .content .img-wrapper .latest {
        top: 1.25rem;
        left: 1.25rem;
    }

    .news-preview .container .content .text .episodes-number {
        display: none;
    }

    .news-preview .container .content .text {
        text-align: start;
        gap: 0.9375rem;
        display: flex;
        flex-direction: column;
        align-items: start;
    }

    .news-preview .container .content .btn {
        display: none;
    }

    .news-preview .container .content .text .trailer-title {
        font-size: 1rem;
        line-height: 1.5625;
    }

    .news-preview .container .content .text .description {
        font-size: 0.75rem;
        line-height: 1.5;
    }
}

section.news-and-series .cards-grid .cards-wrapper {
    display: grid;
    --grid-item-width: 21.25rem;
    grid-template-columns: repeat(auto-fill, minmax(var(--grid-item-width), 1fr));
    grid-template-columns: repeat(auto-fill, minmax(min(var(--grid-item-width), 100%), 1fr));
    gap: 1.3125rem;
    row-gap: 5rem;
}

/* Hide news preview on pages other than 1 */
section.news-and-series .news-preview.hidden-page {
    display: none;
}

/* Optional: Add smooth transition */
section.news-and-series .news-preview {
    transition: opacity 0.3s ease;
}

section.news-and-series .news-preview.hidden-page {
    display: none;
    opacity: 0;
}

section.news-and-series .pagination {
    margin-top: 9rem;
    margin-bottom: 8.5rem;
}

@media (max-width: 768px) {
    section.news-and-series .pagination {
        margin-top: 5rem;
        margin-bottom: 5rem;
    }
}

/* ============================ */
/* RELATED NEWS */
/* ============================ */

section.related-news {
    padding-top: 7.625rem;
    padding-bottom: 10.875rem;
    background-color: #f5f5f5;
    display: grid;
    gap: 8.875rem;
}

section.related-news .top .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--container-gap);
}

section.related-news .top .container .section-title {
    text-transform: uppercase;
    font-weight: 500;
    color: var(--c-green);
    position: relative;
    margin-top: 2.3125rem;
}

section.related-news .top .container .section-title svg {
    position: absolute;
    top: -1.375rem;
    left: -4.375rem;
}

section.related-news .top .container .title {
    color: var(--c-green);
}

section.related-news .top .container .description {
    font-size: 0.875rem;
    line-height: 1.714286;
    text-wrap: balance;
}

section.related-news {
    overflow: hidden;
}

section.related-news .swiper {
    width: 0;
    min-width: 100%;
    overflow: visible;
}

section.related-news .swiper-scrollbar {
    --swiper-scrollbar-size: 1px;
    --swiper-scrollbar-drag-size: 5px;
    --swiper-scrollbar-dash-size: 5px;
    --swiper-scrollbar-color: var(--c-blue);
    flex-grow: 1;
    position: static;
    background-color: transparent;
    background-image: repeating-linear-gradient(to right, transparent, transparent var(--swiper-scrollbar-dash-size), var(--swiper-scrollbar-color) var(--swiper-scrollbar-dash-size), var(--swiper-scrollbar-color) calc(2 * var(--swiper-scrollbar-dash-size)));
}

section.related-news .swiper-scrollbar .swiper-scrollbar-drag::after {
    content: "";
    position: absolute;
    left: 0;
    border-radius: 99px;
    top: calc(100% - (var(--swiper-scrollbar-size) / 2) - (var(--swiper-scrollbar-drag-size) / 2));
    background: var(--swiper-scrollbar-color);
    width: 100%;
    height: var(--swiper-scrollbar-drag-size);
    cursor: ew-resize;
}

section.related-news .controls {
    margin-top: 5rem;
    display: flex;
    align-items: center;
    gap: 1.875rem;
}

section.related-news .controls .swiper-scrollbar {
    flex-grow: 1;
}

section.related-news .swiper .swiper-slide {
    max-width: 21.9375rem;
}

section.related-news .swiper .swiper-slide:first-child {
    max-width: 26.75rem;
}

section.related-news .swiper .swiper-slide:first-child .img-wrapper {
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzc1IiBoZWlnaHQ9IjI4MiIgdmlld0JveD0iMCAwIDM3NSAyODIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0wLjg3NSA2LjA2OTUxVjI3NS4wN0MwLjg3NSAyNzguMzgzIDMuNTYxMjkgMjgxLjA3IDYuODc1IDI4MS4wN0gzNjguODc1QzM3Mi4xODkgMjgxLjA3IDM3NC44NzUgMjc4LjM4MyAzNzQuODc1IDI3NS4wN1Y1Ni42OTI4QzM3NC44NzUgNTMuMzc5MSAzNzIuMTg5IDUwLjY5MjggMzY4Ljg3NSA1MC42OTI4SDMwNC4yNThDMzAwLjAxOCA1MC42OTI4IDI5NS45NTEgNDkuMDA5NiAyOTIuOTUxIDQ2LjAxMjhMMjUxLjY0MSA0Ljc0OTUyQzI0OC42NDEgMS43NTI3OCAyNDQuNTc0IDAuMDY5NTE5IDI0MC4zMzQgMC4wNjk1MTlINi44NzVDMy41NjEyOSAwLjA2OTUxOSAwLjg3NSAyLjc1NTggMC44NzUgNi4wNjk1MVoiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgo=");
    mask-size: 100%;
}

section.related-news .swiper .swiper-slide:not(:first-child) {
    margin-top: 3.625rem;
}

@media (max-width: 1200px) {
    section.related-news .top .container .section-title svg {
        left: -150px;
    }
}

@media (max-width: 980px) {
    section.related-news .top .container .section-title svg.only-desktop {
        display: none;
    }

    section.related-news .top .container .section-title svg.only-mobile {
        display: block;
        left: calc(-1 * var(--container-x-padding));
        top: -2.125rem;
    }

    section.related-news .top .container {
        display: flex;
        flex-direction: column;
        gap: 2.5rem;
    }

    section.related-news .top .container .section-title {
        margin-top: 0;
        margin-bottom: 2.5rem;
    }

    section.related-news {
        padding-top: 7.4375rem;
        gap: 2.5rem;
        padding-bottom: 5rem;
    }

    section.related-news .controls {
        margin-top: 2.5rem;
        flex-wrap: wrap;
    }

    section.related-news .top .container .description br {
        display: none;
    }
}

@media (max-width: 768px) {
    section.related-news .swiper .swiper-slide:not(:first-child) {
        margin-top: 0;
    }

    section.related-news .swiper .swiper-slide:nth-child(n) {
        max-width: 80vw;
    }

    section.related-news .swiper .swiper-slide:first-child .img-wrapper {
        mask-image: none;
    }
}

/* ======================================== */
/* LANG SWITCHER */
/* ======================================== */

#lang-switcher {
    position: relative;
    border: none;
    background-color: transparent;
    margin-inline-start: 1rem;
    height: fit-content;
    margin-block: auto;
}

#lang-switcher button {
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

#lang-switcher button svg {
    transition: rotate 0.2s ease;
}

#lang-switcher:has(.options:not([inert])) button svg {
    rotate: -0.5turn;
}

#lang-switcher .options {
    --_padding: 2.1875rem;
    --_gap: 1.375rem;
    border-radius: 0.3125rem;
    z-index: 88888;
    min-width: 8.125rem;
    position: absolute;
    right: 0;
    top: calc(100% + 1rem);
    background-color: var(--c-blue);
    display: grid;
    grid-template-rows: 1fr;
    box-shadow: 0 0 15px rgb(0 0 0 / 0.16);
    transform-origin: top left;
    opacity: 1;
    scale: 1;
    transition:
        grid-template-rows 0.2s ease,
        opacity 0.2s ease,
        scale 0.2s ease;
}

#lang-switcher .options[inert] {
    grid-template-rows: 0fr;
    scale: 0.95;
    opacity: 0;
}

#lang-switcher nav.options ul li a {
    display: block;
    padding-block: calc(var(--_gap) / 2);
    padding-inline: var(--_padding);
    opacity: 0.4;
    transition: opacity 0.2s ease;
    font-weight: 500;
}

#lang-switcher nav.options ul li a[aria-current="true"] {
    opacity: 1;
}

#lang-switcher nav.options ul li a[aria-current="false"]:where(:hover, :focus-visible) {
    opacity: 0.8;
}

#lang-switcher nav.options ul li a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -2px;
}

#lang-switcher nav.options ul li:first-child a {
    padding-block-start: 1.125rem;
}

#lang-switcher nav.options ul li:last-child a {
    padding-block-end: 1.5rem;
}