/* ===================================
   RESET
=================================== */

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

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

.page{
    display:flex;
    min-height:100vh;
}

/* ===================================
   LEFT PANEL
=================================== */

.left{
    position:fixed;
    top:0;
    left:0;
    width:40%;
    height:100vh;

    background:
    linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),
    url("Harold6.jpg.jpg") center/cover no-repeat;
}

.back{
    position:absolute;
    top:45px;
    left:50px;
    color:#fff;
    font-size:32px;
    text-decoration:none;
    z-index:2;
}

.back:hover{
    opacity:.7;
}

.left-content{
    position:absolute;
    left:50px;
    bottom:90px;
    z-index:2;
    color:#fff;
}

.left-content h1{
    font-size:70px;
    line-height:.95;
    margin-bottom:20px;
}

.subtitle{
    max-width:330px;
    color:#ddd;
    font-size:18px;
    line-height:1.6;
}

/* ===================================
   RIGHT PANEL
=================================== */

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

/* ===================================
   FEATURED SECTION
=================================== */

.featured{
    position:relative;
    overflow:hidden;
    margin-bottom:18px;
}

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

.featured::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to top,
        rgba(0,0,0,.75),
        rgba(0,0,0,.15));
}

.featured-text{
    position:absolute;
    left:40px;
    bottom:40px;
    color:#fff;
    z-index:2;
}

.featured-text span{
    font-size:14px;
    letter-spacing:2px;
    opacity:.8;
}

.featured-text h2{
    font-size:60px;
    margin:10px 0;
}

.featured-text p{
    max-width:520px;
    line-height:1.6;
    color:#eee;
}

/* ===================================
   GALLERY
=================================== */

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

.card{
    position:relative;
    overflow:hidden;
    cursor:pointer;
}

.card img{
    width:100%;
    height:320px;
    object-fit:cover;
    transition:.4s;
    display:block;
}

.card:hover img{
    transform:scale(1.08);
}

.card::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to top,
    rgba(0,0,0,.7),
    transparent);
}

.card h3{
    position:absolute;
    bottom:20px;
    left:20px;
    color:#fff;
    font-size:20px;
    z-index:2;
}

/* ===================================
   MOBILE
=================================== */

@media(max-width:900px){

.page{
    display:block;
}

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

.left-content{
    left:35px;
    bottom:35px;
}

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

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

.featured img{
    height:260px;
}

.featured-text{
    left:20px;
    bottom:20px;
}

.featured-text h2{
    font-size:34px;
}

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

.card img{
    height:260px;
}

}