<div class="container">
  <div class="grid-container">
    <div class="grid-item item1">
      <div class="logo">
        <h2>galleria.</h2>
      </div>
      <div class="slogan">
        <p>Go through 
          our Gallery</p>
      </div>
    </div>
    <div class="grid-item item2">
      <div class="vanghogh">
        <img src="https://www.moma.org/media/W1siZiIsIjQ2NzUxNyJdLFsicCIsImNvbnZlcnQiLCItcXVhbGl0eSA5MCAtcmVzaXplIDIwMDB4MjAwMFx1MDAzZSJdXQ.jpg?sha=314ebf8cc678676f" alt="" class="starry-night">
          <div class="description">
            <h2>starry night</h2>
        <p>vincent van gogh</p>
          </div>
        </div>
      
      <div class="vermeer"><img src="https://www.mauritshuis.nl/media/wlola5to/0670_repro.jpg?center=0.40265416736272885,0.47815912636505459&mode=crop&width=2048&rnd=132902571928600000&quality=70" alt="" class="girl-with-a-perl">
        <div class="description">
            <h2>girl with a perl
              earring</h2>
        <p>johannes vermeer</p>
          </div>
      </div>
      
    <div class="gentileschi"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Artemisia_Gentileschi_%E2%80%94_Conversione_della_Maddalena_%28Maria_Maddalena_penitente.jpg/800px-Artemisia_Gentileschi_%E2%80%94_Conversione_della_Maddalena_%28Maria_Maddalena_penitente.jpg" alt="" class="penitent-magdalene">
       <div class="description">
            <h2>patnitent
         magdalene</h2>
        <p>artemisia gentileschi</p>
          </div>
    </div>
      
    <div class="rembrandt"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/Rembrandt_Christ_in_the_Storm_on_the_Lake_of_Galilee.jpg/800px-Rembrandt_Christ_in_the_Storm_on_the_Lake_of_Galilee.jpg" alt="" class="the-storm-on-the-sea-of-galilee">
       <div class="description">
            <h2>the storm on the 
         sea of galilee</h2>
        <p>rembrandt</p>
          </div>
    </div>
      
    <div class="eyck">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/The_Arnolfini_portrait_%281434%29.jpg/800px-The_Arnolfini_portrait_%281434%29.jpg" alt="" class="arnolfini-portait">
        <div class="description">
            <h2>arnolfini portrait</h2>
        <p>jan van eyck</p>
          </div>
      </div>
      <div class="fragonard"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/43/Joean_Honor%C3%A9_Fragonard_-_The_Swing.jpg/800px-Joean_Honor%C3%A9_Fragonard_-_The_Swing.jpg" alt="" class="the-swing">
        <div class="description">
            <h2>The Swing</h2>
        <p>jean-honore fragonard</p>
          </div>
      </div>
 </div>
  </div>
</div>

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

.container {
  height: 100vh;
}

.grid-container {
  height: 100%;
  display: grid;
  grid-template-rows: repeat (2, 1fr );
  grid-template-areas: "header header"
   "main main";
  
  row-gap: 2rem;
   overflow-x: hidden;
}

.item1 {
  width: 100%;
  height: 10vh;
  grid-area: header;
  border-bottom: 1px solid #E4E4E4 ;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.logo {
  width: 30%;
  font-size: 1.5rem;
}

.slogan {
  color: #8D8D8D ;
  text-transform: uppercase;
  letter-spacing: .2rem;
  font-size: .9rem;
}

.item2 {
  height: 100%;
  grid-area: main;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  row-gap: 2rem;
}

.item2 div {
  height: 90%;
  width: 90%;
  position: relative;
  display: inline-block;
  height: auto;
}

img {
  display: block;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.description {
  width: auto;
  position: absolute;
  bottom: 8rem;
  left: 3rem;
  color: white;
  white-space: pre-line;
  line-height: .9;
  height: auto;
  text-transform: capitalize;
}

.description h2 {
  color: white;
  font-size: 2rem;
}

.description p {
  opacity: 0.8;
}

@media only screen and (min-width: 300px) and (max-width: 500px) {
  .item1 {
    justify-content: space-between;
    padding: 0 .5rem;
  }
  .slogan p {
    font-size: .5rem;
    white-space: pre-line;
  }
  
  .description {
    left: 1rem;
  }
  
  .description h2 {
    font-size: 1.5rem;
  }
}

@media only screen and (min-width: 900px) and (max-width: 1612px) {
  
  .item1 {
    justify-content: space-between;
    padding: 0 2rem;
  }
  .item2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}