*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial;
}

body{
  background:#671199ee;
  color:rgba(255, 255, 255, 0.95);
}

.highlight{
  color:#ff6a00;
}

/* SECTION */
.hero{
  padding:80px 120px;
}

/* CONTAINER */
.container{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:40px;
}

/* TEXT */
.text{
  max-width:420px;
}

.text h1{
  font-size:38px;
  line-height:1.4;
  margin-bottom:20px;
}

.text p{
  color:#ddd;
  font-size:14px;
  margin-bottom:25px;
}

/* GALLERY (DESKTOP DESIGN) */
.gallery{
  position:relative;
  width:800px;
  height:580px;
}

.gallery img{
  position:absolute;
  width:230px;
  height:270px;
  object-fit:cover;
  border-radius:10px;
  transition:0.4s;
}

/* HOVER EFFECT */
.gallery img:hover{
  transform:scale(1.08);
}

/* IMAGE POSITIONS */
.img2{ left:170px; top:80px; }
.img3{ left:380px; top:450; }
.img5{ left:190px; top:380px; }
.img6{ left:380px; top:320px; }

/* ========================= */
/* 📱 TABLET RESPONSIVE */
/* ========================= */
@media (max-width: 900px){

  .hero{
    padding:60px 40px;
  }

  .container{
    flex-direction:column;
    align-items:center;
    text-align:center;
  }

  .gallery{
    position:static;
    width:100%;
    height:auto;

    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:15px;
    margin-top:30px;
  }

  .gallery img{
    position:static;
    width:100%;
    height:200px;
  }
}

/* ========================= */
/* 📱 MOBILE RESPONSIVE */
/* ========================= */
@media (max-width: 500px){

  .hero{
    padding:40px 20px;
  }

  .text h1{
    font-size:26px;
  }

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

  .gallery img{
    height:220px;
  }
}