html {
   width:100vw; 
   overflow:hidden;
}
    
body {
    background-color: #192015;
    color: #F3FFAE;
    display:flex;
    height: 100vh;
    width:100%;
    margin:0;
    font-family: "Inter", sans-serif;
}


    @media screen and (max-width: 1024px) { 
        body {
            flex-direction: column;
        }
    }
    @media screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) { 
        body {
            height: -webkit-fill-available;
        }
    }

.uppercase {
    text-transform: uppercase;
}

.garamond {
    font-family: "EB Garamond", serif;
}

h1, footer {
    font-weight: bold;
    font-size: 32px;
    line-height: 0.9;
    letter-spacing: -0.04em;
    text-align:center;
    margin:0;
    
}

@media screen and (max-width: 1024px) {
    h1, footer { 
        font-size: 28px;
    }
}

footer {
 
}

h2 {
    font-weight: 500;
    font-size:18px;
    line-height:1;
    letter-spacing: -0.02em;
    text-align:center;
    margin:0;
}

@media screen and (max-width: 1024px) { 
    h2 {
        font-size:16px;
    }
}

h2 .break {
    white-space: pre-line;
}

@media screen and (max-width: 1024px) { 
    h2 svg {
        width:20px;
        height:2px;
    }
}

h2 .first {
    display:flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
}

h2 .inter {
    font-weight: 700;
    font-size: 66px;
    line-height: 1;
    letter-spacing: -0.04em;
}

@media screen and (max-width: 1024px) { 
    h2 .inter {
        font-size: 40px;
    }
}

h2 .garamond {
    font-style: italic;
    font-weight: 400;
    font-size: 98px;
    line-height: 0;
    letter-spacing: -0.05em;
}


@media screen and (max-width: 1024px) { 
    h2 .garamond {
        font-size: 60px;
    }
}

body .half {
    width:50%;
}

@media screen and (max-width: 1024px) { 
    body .half {
        width:100%;
        height:50%;
    }
}

body .full {
    width:100%;
    min-height:100vh;
    padding:1.5rem;
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) { 
    body .full {
            min-height:-webkit-fill-available;
    }
}

body .half:first-of-type {
    padding:1.5rem;
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}

body .half:first-of-type h1 {
    margin:0;
}

body .half img {
    height:100%;
    width:100%;
    object-fit: cover;
    object-position: top;
}

section {
    padding: 60px 20px;
    text-align: center;
}

@media screen and (max-width: 1024px) { 
    section {
        padding-top:120px;
        padding-bottom:146px;
    }
}