/* Utils */
.max-w-full	{
    max-width: 100%;
}

.relative {
    position: relative;
}

.d-flex {
    display: flex;
}

.flex-wrap {
    flex-wrap: wrap;
}

.items-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-center {
    justify-content: center;
}

.gap-1 {
    gap: 4px; /* 1x4 */
}

.gap-6 {
    gap: 24px; /* 6x4 */
}

.gap-8 {
    gap: 32px; /* 8x4 */
}

.gap-x-12 {
    column-gap: 48px; /* 12x4 */
}

.gap-y-6 {
    row-gap: 24px; /* 6x4 */
}

.me-18 {
    margin-block-end: 72px; /* 18x4 */
}

.p-0 {
    padding: 0;
}

.py-3 {
    padding-top: 12px; /* 3x4 */
    padding-bottom: 12px;
}

.text-center {
    text-align: center;
}

.bg-blue {
    background-color: #00499D;
}

.bg-sky {
    background-color: #EBF5FE;
}

.text-white {
    color: white;
}

.overflow-clip {
    overflow: clip;
}

.list-none {
    list-style: none;
}
/* Layout */
* {
    box-sizing: border-box;
}

.container {
    width: 100%;
    max-width: 1208px;
    margin-inline-start: auto;
    margin-inline-end: auto;
}
/* Content */
body {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    line-height: 32px;
    font-weight: 400;
    color: #47474F;
    margin: 0;
}

body > nav {
    padding: 24px 48px;
}

body > header {
    padding: 16px 16px 92px;
    min-height: 64vh;

    @media (min-width: 390px) {
        padding: 16px 48px 92px;
    }

    @media (min-width: 768px) {
        padding: 16px 64px 92px;
    }

    @media (min-width: 920px) {
        min-height: 85vh;
    }
}

section {
    padding: 96px 16px 124px;

    @media (min-width: 390px) {
        padding: 96px 48px 124px;
    }

    @media (min-width: 768px) {
        padding: 96px 64px 124px;
    }
}

body > footer {
    padding: 24px 16px;

    @media (min-width: 390px) {
        padding: 24px 48px;
    }

    @media (min-width: 768px) {
        padding: 24px 64px;
    }
}

p {
    margin: 0 0 1em;
}

a {
    color: inherit;
}

a.marked {
    display: flex;
    align-items: center;
    gap: 8px;
}

[role="button"] {
    padding: 12px 16px;
    border: 1px solid white;
    border-radius: 9999px;
    text-decoration: none;
    font-size: 16px;
    line-height: 20px;
    font-weight: 700;

    &:hover {
        color: #00499D;
        background-color: white;
    }
}

:is( h1, .h1 ) {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 52px;
    line-height: 60px;
    font-weight: 900;
    color: #161616;
    margin-block-start: 0;
    margin-block-end: 24px;

    @media (min-width: 768px) {
        font-size: 60px;
        line-height: 68px;
    }

    @media (min-width: 920px) {
        font-size: 84px;
        line-height: 88px;
    }
}

hgroup > :is( h1, .h1 ) ~ p {
    font-size: 24px;
    line-height: 40px;
    font-weight: 400;
    margin-block-start: 24px;
    margin-block-end: 24px;

    @media (min-width: 390px) {
        font-size: 28px;
        line-height: 40px;
        font-weight: 400;
    }
}

:is( h2, .h2 ) {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 40px;
    line-height: 50px;
    font-weight: 900;
    color: #161616;
    margin-block-start: 0;
    margin-block-end: 16px;

    @media (min-width: 920px) {
        font-size: 64px;
        line-height: 70px;
    }
}

hgroup > :is( h2, .h2 ) ~ p {
    font-size: 24px;
    line-height: 34px;
    font-weight: 500;
    margin-block-start: 24px;
    margin-block-end: 24px;
}

:is( h3, .h3 ) {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 36px;
    line-height: 44px;
    font-weight: 800;
    color: #161616;
    margin-block-start: 0;
    margin-block-end: 16px;

    @media (min-width: 920px) {
        font-size: 48px;
        line-height: 58px;
    }
}

hgroup > img + :is( h3, .h3 ) {
    margin-block-start: 72px;
}

:is( h3, .h3 ) ~ p {
    margin-block-start: 16px;
    margin-block-end: 16px;
}

:is( h4, .h4 ) {
    font-family: 'Schibsted Grotesk', sans-serif;
    font-size: 32px;
    line-height: 40px;
    font-weight: 800;
    color: #161616;
    margin-block-start: 0;
    margin-block-end: 16px;

    @media (min-width: 920px) {
        font-size: 36px;
    }
}

:is( h4, .h4 ) ~ p {
    margin-block-start: 16px;
    margin-block-end: 16px;
}

.text-white :is(
    h1, .h1,
    h2, .h2,
    h3, .h3,
    h4, .h4,
    h5, .h5,
) {
    color: white
}

hgroup > p:last-child {
    margin-block-end: 0;
}
/* /Content */
/* Components */
article {
    padding: 32px;
    background-color: white;
    border-radius: 48px;
    box-shadow: 0px 0px 32px 0px rgba( 0, 0, 0, 0.08 );

    @media (min-width: 920px) {
        padding: 64px;
    }
}

.article-grid {
    display: grid;
    gap: 32px;
    grid-template-columns: 1fr;

    @media (min-width: 920px) {
        grid-template-columns: 1fr 1fr;
    }
}

.parallax-1 {
    --parallax-translation: 5;
    --parallax-rotation: 50;
    position: absolute;
    left: 15%;
    bottom: -15%;
    animation: a-parallax linear both;
    animation-direction: alternate;
    animation-timeline: scroll();
}

.parallax-2 {
    --parallax-translation: 5;
    --parallax-rotation: 50;
    position: absolute;
    top: 0;
    left: 60%;
    animation: a-parallax linear both;
    animation-direction: alternate;
    animation-timeline: scroll();
}

.parallax-3 {
    --parallax-translation: 5;
    --parallax-rotation: 50;
    position: absolute;
    top: 10%;
    left: 10%;
    animation: a-parallax linear both;
    animation-direction: alternate;
    animation-timeline: scroll();
}

.parallax-4 {
    --parallax-translation: 5;
    --parallax-rotation: 50;
    position: absolute;
    top: 5%;
    right: 5%;
    animation: a-parallax linear both;
    animation-direction: alternate;
    animation-timeline: scroll();
}

.parallax-5 {
    --parallax-translation: 5;
    --parallax-rotation: 50;
    position: absolute;
    bottom: 20%;
    left: 50%;
    animation: a-parallax linear both;
    animation-direction: alternate;
    animation-timeline: scroll();
}

.parallax-6 {
    --parallax-translation: 5;
    --parallax-rotation: 50;
    position: absolute;
    bottom: 0%;
    left: calc( 50% + 192px );
    animation: a-parallax linear both;
    animation-direction: alternate;
    animation-timeline: scroll();
}

@keyframes a-parallax {
    from {
        transform: translate3d( 0, 0, 0 ) rotate3d( 0, 0, 1, 0deg );
    }

    to {
        transform: translate3d( 0, calc( var( --parallax-translation, 1 ) * 100px ), 0 ) rotate3d( 0, 0, 1, calc( var( --parallax-rotation, 1 ) * 5deg ) );
    }
}