*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}

body{
    background:#1f1f1f;
    overflow:hidden;
}

.page{
    display:flex;
}

/* LEFT */

.left{
    position:fixed;
    left:0;
    top:0;
    width:40%;
    height:100vh;
    background:
    linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)),
    url("Harold6.jpg.jpg") center/cover;
}

.back{
    position:absolute;
    top:45px;
    left:50px;
    color:white;
    font-size:32px;
    text-decoration:none;
}

.left-content{
    position:absolute;
    left:60px;
    bottom:90px;
    color:white;
}

.left-content h1{
    font-size:64px;
    line-height:1;
    margin-bottom:25px;
}

.source{
    color:#ddd;
    text-decoration:underline;
    font-size:18px;
}

.right{
    margin-left:40%;
    width:60%;
    padding:45px;
}

/* GALLERY */

.gallery{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
}

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

.big{
    grid-column:span 1;
    height:450px;
}

.gallery div:not(.big){
    height:220px;
}

.gallery img{
    transition:.35s;
}

.gallery img:hover{
    transform:scale(1.03);
}

@media(max-width:900px){

.page{
    display:block;
}

.left{
    position:relative;
    width:100%;
    height:60vh;
}

.right{
    width:100%;
    margin-left:0;
    padding:20px;
}

.gallery{
    grid-template-columns:1fr;
}

.big,
.gallery div:not(.big){
    height:300px;
}

.left-content h1{
    font-size:48px;
}

}