/* -------------------- GLOBAL / MOBILE -------------------- */
:root {
    --blue: #414AE2;
    --fs: 16px;
    --lh: 18px;
    --grid-gutter: 32px;
    --grid-margin: 20px;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "neue-haas-grotesk-display", "Helvetica", "Arial", sans-serif;
    font-size: var(--fs);
    line-height: var(--lh);
    color: var(--blue);
    text-transform: lowercase;
}

.container {
    width: 100dvw;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    row-gap: var(--grid-gutter);
    padding: var(--grid-margin);
    padding-bottom: calc(var(--grid-margin) * 2);
}

.logo {
    grid-column: span 12;
}

.logo img,
.image img {
    display: block;
    width: 100%;
}

.image {
    grid-column: span 12;
}

.services {
    grid-column: span 12;
    grid-template-rows: fit-content;
}

.disclaimer {
    grid-column: span 12;
    grid-template-rows: fit-content;
}

.description {
    grid-column: span 12;
    grid-template-rows: fit-content;
}

/* -------------------- TABLET-------------------- */
@media screen and (min-width: 768px) {
    :root {
        --fs: 16px;
        --lh: 18px;
    }
}


/* -------------------- DESKTOP M -------------------- */
@media screen and (min-width: 1024px) {
    :root {
        --fs: 14px;
        --lh: 14px;
        --grid-gutter: 12px;
    }

    .container {
        column-gap: var(--grid-gutter);
        grid-template-rows: 1fr max-content;
        min-height: 100dvh;
    }

    .image {
        grid-column: 9 / 13;
        align-self: start;
    }

    .logo {
        grid-column: 1 / 8;
        align-self: end;
    }

    .services {
        grid-column: 1 / 2;
    }
    
    .disclaimer {
        grid-column: 2 / 4;
    }
    
    .description {
        grid-column: 4 / 8;
    }
}

/* -------------------- DESKTOP L -------------------- */
@media screen and (min-width: 1280px) {
    :root {
        --fs: 14px;
        --lh: 14px;
    }
}

/* -------------------- VAR DESKTOP XL-------------------- */
@media screen and (min-width: 1440px) {
    :root {
        --fs: 14px;
        --lh: 14px;
    }
}

/* -------------------- VAR DESKTOP XXL -------------------- */
@media screen and (min-width: 1920px) {
    :root {
        --fs: 14px;
        --lh: 14px;
    }
}

/* -------------------- VAR DESKTOP XXXL -------------------- */
@media screen and (min-width: 2560px) {
    :root {
        --fs: 14px;
        --lh: 14px;
    }
}