/* source */
/* https://codepen.io/Kseso/pen/OjprYz */

/* dirty reset */
* {margin:0;padding:0;border:0 none; position: relative;}
*,*:before,*:after {box-sizing:border-box;;}

@media only screen and (min-width: 800px) {

    section {
        display: grid;

        grid-template-columns: repeat(6, 1fr);
grid-auto-rows: 10vw;
        grid-gap: calc(1rem + 2.5vmin);
        grid-auto-flow: dense;

        padding: calc(1rem + 2.5vmin);

        /* centre la grille verticalement */
        min-height: 100vh;
        align-content: center;
    }

    p {
        font-size: calc(1rem + .5vmax + 1vmin);
        color:rgb(222, 74, 74);
        background:rgb(255, 255, 255);
        
    }

    p:first-child {

        grid-column: 3 / span 2;
        grid-row: 2 / span 3;

        font-size: calc(1rem + 4vmax + 2vmin);

        z-index: 10;
    }

    p:nth-child(2n+3) {
        grid-row-start: span 3;
        font-size: calc(.9rem + 2vmin);
    }

    p:nth-child(4n+5) {
        grid-column-start: span 2;
        grid-row-start: span 2;
        font-size: calc(1rem + 1vmax + 2vmin);
    }

    p:nth-child(6n+7) {
        grid-row-start: span 2;
        font-size: calc(.6rem + 1.5vmax + 1vmin);
    }

    p:nth-child(8n+9) {
        grid-column-start: span 2;
        grid-row-start: span 3;
        font-size: calc(1.2rem + 1.5vmax + 1vmin);
    }

    span {
        display: flex;
        width: 100%;
        height: 100%;
        justify-content:center;
        align-items:center;

   font-family: 'DinaChaumont-DisplayBold';
    font-weight: 900;

        text-transform:uppercase;

        padding: 1rem;

        text-align: center;
        line-height: 1.2;
    }
}
.img-block{
    overflow:hidden;
    background:black;
}

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

.hero-title{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:0.4rem;
}

.hero-title a{
    text-decoration:none;
    color:inherit;
}

a:visited {             color:rgb(222, 74, 74);
;}
a:hover{color:rgb(97, 101, 232);}