:root {
    --main-bg-color: rgb(245, 245, 245);
    --second-bg-color: rgb(0, 0, 0);
    --third-bg-color: rgb(255, 255, 254);
    --debug-color: rgba(127, 255, 212, 0.443);

    --main-margin-unit-mobile: 3svh;
    --main-margin-unit-desktop: var(--main-margin-unit-mobile);

    --text-size-desktop: 2vh;
    --text-size-mobile: 2.5vh;
}



body {
    margin: 0;
    border: 0;
    font: inherit;
    background-color: var(--main-bg-color);
    padding: var(--main-margin-unit-desktop);
    letter-spacing: 2%;
    overflow: hidden;
}



.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.container-main {
    position: relative;
}

body .grid-cell {
    font-size: var(--text-size-desktop);
    padding: 0vw .3vw 0vw .3vw;
    z-index: 10;
}

.container-grid {
    display: grid;
    grid-auto-flow: column;
    height: 94svh;

}



.grid-cell-link,
.grid-cell-text {
    overflow-wrap: normal;
    word-break: keep-all;
    background-color: var(--main-bg-color);
    z-index: 150;
}

.grid-cell-link {
    display: block;
    color: inherit;
    text-decoration: none;
    background-color: var(--main-bg-color);
}

.grid-cell-link:hover {
    background-color: var(--second-bg-color);
    color: var(--main-bg-color);
}

.container-bg-img {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    width: 96vw;
    height: 94svh;
    object-fit: cover;
}

.container-bg-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.about-copy {
    display: block;
    position: absolute;
    bottom: var(--main-margin-unit-desktop);
    left: var(--main-margin-unit-desktop);
    z-index: 20;

    pointer-events: none;
}

.about-copy p {
    width: 50vw;
    height: fit-content;
    font-size: var(--text-size-desktop);
}

#about-flavour {
    position: absolute;
    top: var(--main-margin-unit-desktop);
    width: 85%;
    font-size: var(--text-size-desktop);
}

/* ID-ABOUT */




@media (max-width: 600px) {

    body {
        padding: var(--main-margin-unit-desktop);
        background-color: var(--main-bg-color);
    }

    body .grid-cell {
        font-size: var(--text-size-mobile);
        padding: 0vw .5vh 0vw .5vh;
    }

    .container-grid {
        height: 94svh;
    }



    .container-bg-img {
        width: 89vw;
        height: 94svh;
    }

    .grid-cell-link,
    .grid-cell-text {

        background-color: var(--main-bg-color);
    }

    .about-copy {
        left: auto;
    }


    .about-copy p {
        width: 85%;
        height: fit-content;
        font-size: var(--text-size-mobile);

    }

    #about-flavour {
        position: absolute;
        top: var(--main-margin-unit-mobile);
        width: 85%;
        font-size: var(--text-size-mobile);
    }

}

@media (max-width:420px) {

    .about-copy {
        left: auto;
    }

    .about-copy p {
        width: 90%;
        margin: 0px;

    }

    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

}