html, body,*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body > div {
  display: grid;
  height: 100vh;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 0px;
}
a{
  overflow: hidden;
  min-height: 400px;
  position: relative;
}
a img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 10%;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .35s ease;
  background-color: #161616e7;
}

a:hover .overlay {
  opacity: 1;
}
.text {
  color: white;
  position: absolute;
  top: 15%;
  left: 10%;
}

.text h2{
  font-size: 2rem;
  margin-bottom: 2rem;
  font-weight: 500;
}
.text p{
  font-size: 1rem;
}