/* Main Configuration */
@layer configuration {
*,*::before,*::after {
    box-sizing      : border-box;
    padding         : 0;
    margin          : 0;
    background      : none;
    text-decoration : none;
    outline         : none;
    font-family     : inherit;
    font-size       : inherit;
    line-height     : inherit;
    font-weight     : inherit;
    color           : inherit;

    /* Disable double tap to zoom */
    touch-action : manipulation;

    /* Fix the antialias when needed */
    -webkit-font-smoothing  : antialiased;
    -moz-osx-font-smoothing : grayscale;
    font-feature-settings   : "onum", "kern", "liga", "clig", "calt";

    /* Global Transitions */
    transition-delay           : 0ms;
    transition-duration        : 150ms;
    transition-property        : none;
    transition-timing-function : ease-out ;
}
}
@layer configuration {

@font-face {
    font-display: swap;
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/lato-v24-latin-regular.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    src: url('fonts/lato-v24-latin-700.woff2') format('woff2');
}


:root {
    
    /* Colors */
    --c-bg   : hsl(0,0%,100%);
    --c-text : hsl(0,0%,10%);

    /* Font Settings */
    --f-family : Lato, sans-serif;
    --f-size   : 30px;
    --f-height : 32px;
    --f-weight : 400;

    /* Set the defaults */
    font-size   : var(--f-height);
    font-family : var(--f-family);
    font-weight : var(--f-weight);
    background  : var(--c-bg);
    color       : var(--c-text);
}

body {
    font-size             : var(--f-size);
    line-height           : var(--f-height);
    padding               : 0 6vw;
    display               : grid;
    gap                   : 10vh 0;
    grid-template-columns : 1fr;
    grid-template-areas   : "header" "content" "mark";


    @media (min-width: 900px) {
        grid-template-columns : 1fr 1fr;
        grid-template-areas   : "header mark" "content mark";
    }

}
}
@layer configuration {
:root {

    --text-base  : clamp(20px, 0.83vi + 16.67px, 30px) / 1.1 Lato, sans serif;
    --text-small : clamp(15px, 0.42vi + 13.33px, 20px) / 1.1 Lato, sans serif;

}
}/* Global Settings *//* Content Goes Here *//* UI Elements */
.header {
    grid-area : header;
    padding   : 6vw 0 0;
}
.logo {
    display   : block;
    width     : 100%;
    transform : translateY(-10%);
    @media (min-width: 900px) {
        width : 30vw;
    }
}
.mark-container {
    grid-area       : mark;
    overflow        : hidden;
    display         : flex;
    justify-content : center;
    align-items     : center;
    position        : sticky;
    top             : 0;
    aspect-ratio    : 9/10;

    @media (min-width: 900px) {
        height       : 100svh;
        aspect-ratio : unset;
    }
}
.mark {
    display         : block;
    object-fit      : cover;
    object-position : center;
    width           : 100%;
    transform       : translateX(4.5%); 

    @media (min-width: 900px) {
        transform : translateY(-6%);
    }
}
.content {
    grid-area          : content;
    display            : grid;
    grid-template-rows : auto 1fr auto auto;
    padding            : 0 0 6vw 44vw;
    font               : var(--text-base);
    gap                : 5vh;

    @media (min-width: 900px) {
        padding : 0 0 6vw 10.5vw;
    }
}
strong {
    font-weight : 700;
}
.footer {
    display        : flex;
    font           : var(--text-small);
    text-transform : uppercase;
    gap            : 3vw; 

    a:hover {
        font-weight: 700;
    } 
}/* Reusable Components */