style.scss

:root {
    --h1: 7em;
    --h2: 14em;
    --h3: 21em;

    --color1: #1c201e;
    --color2: #00000050;
  }

body {
    background-color: var(--color1);
    padding: 0;
    margin: 0;
}
.contwrapper {
    margin: 0.7em;
}

.cont {
    display: grid;
    margin: auto;
    max-width: 85.375em;     // = 1366px
    grid-template-columns: repeat(7, 1fr);
    grid-gap: 0.7em;
}

.pic {
    width: 100%;
    object-fit: cover;
    box-shadow: 0 0.3em 0.7em var(--color2);
}

.h1 {
    height: var(--h1);
}
.h2 {
    height: var(--h2);
}
.h3 {
    height: var(--h3);
}

.pic1 {
    grid-area: 1/1/2/8;
    object-position: 20% 50%;
}
.pic2 {
    grid-area: 2/4/3/7;
    object-position: 30% 50%;
}
.pic3 {
    grid-area: 3/1/4/8;
    object-position: 80% 50%;
}
.pic4 {
    grid-area: 4/1/5/6;
    object-position: 30% 50%;
}
.pic5 {
    grid-area: 5/1/6/8;
}
.pic6 {
    grid-area: 6/2/7/7;
    object-position: 75% 50%;
}
.pic7 {
    grid-area: 7/4/8/7;
    object-position: 30% 50%;
}
.pic8 {
    grid-area: 8/1/9/8;
    object-position: 100% 50%;
}
.pic9 {
    grid-area: 9/2/10/5;
}
.pic10 {
    grid-area: 10/1/11/8;
    object-position: 100% 50%;
}

@media screen and (max-width: 56.25em) { // = 900px
    
    .contwrapper {
        margin: 0.4em;
    }
    .cont {
        grid-gap: 0.4em;
    }

    .h1 {
        height: 7em; 
    }
    .h2 {
        height: 12em; 
     }
     .h3 {
        height: 6em; 
     }

}

@media screen and (max-width: 37.5em) { // = 600px
    
    .contwrapper {
        margin: 0.4em 0;
    }

}