<div class="overlay-wrap">
    <div class="text-overlay-wrapper">
<a class="text-overlay-title">Remind’s News</a><br>
<a class="text-overlay-subtitle">Dive into our stories in shaping a sustainable future. We bring you the latest news, captivating stories, and our social media content. Stay informed, get inspired, and join the conversation as we explore the impact of responsible e-waste recycling.</a>
</div>
</div>
<div class="gallery-wrap">
  <div class="item item-1">
    <div class="text-wrapper">
      <a href="https://www.dev.remind.co.id/news/" class="text-link">Sustainability Impact</a>
    </div>
  </div>

  <div class="item item-2">
    <div class="text-wrapper">
      <a href="https://www.dev.remind.co.id/news/our-stories/" class="text-link">Our Stories</a>
    </div>
  </div>

  <div class="item item-3">
    <div class="text-wrapper">
      <a href="https://www.dev.remind.co.id/news/remind-social-media/" class="text-link">Social Media</a>
    </div>
  </div>
</div>

<style>
.text-overlay-wrapper {
max-width: 50vw;
  padding: 20px 20px;
  position: relative; 
  top: 27%; 
  left: 10%;
  border-radius: 15px;
  z-index: 51; 
  color: #ffffff; 
}

.text-overlay-title {
  font-size: 3.5rem;
  font-weight: 400;
  color: #ffffff !important;
  font-family: 'Lexend', sans-serif; /* Add Lexend font */
}


.text-overlay-subtitle{
  font-size: 1.5rem; 
  color: #ffffff !important;
}

.overlay-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 60vh;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)); 
  z-index: 50; 
  pointer-events: none; 
}

.text-wrapper {
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  padding: 20px 20px;
  position: absolute; 
  bottom: 30%; 
  left: 50%;
  transform: translateX(-50%); 
  border-radius: 25px;

}

.text-link {
  display: inline-block;
  text-align: center;
  color: #fff !important;
  text-decoration: none;
  border-radius: 40px;
  padding: 10px 20px;
  font-size: 2rem; 
    transition: flex 0.8s ease;

}

.text-wrapper:hover {
  background-color: rgba(255, 255, 255, 0.2); 

}

.gallery-wrap {
  display: flex;
  flex-direction: row;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.item {
  flex: 1;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: flex 0.8s ease;
  position: relative;
  pointer-events: auto;
  z-index: 0;
}

.item:hover {
  flex: 6;
  z-index: 3;
}

.item-1 {
  background-image: url('https://www.dev.remind.co.id/wp-content/uploads/2025/01/pexels-jakob-schlothane-183270347-11791008-scaled.jpg');
}

.item-2 {
  background-image: url('https://www.dev.remind.co.id/wp-content/uploads/2025/01/pexels-wildlittlethingsphoto-697244-scaled.jpg');
}

.item-3 {
  background-image: url('https://www.dev.remind.co.id/wp-content/uploads/2025/01/pexels-george-dolgikh-551816-1310532-scaled.jpg');
}
</style>