* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Georgia, serif;
  background: white;
  color: black;
}

.site-wrapper {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 80px;
  padding: 120px 9vw;
}

.sidebar h1 {
  font-size: 4rem;
  line-height: 0.95;
  font-weight: normal;
  margin: 0 0 25px;
}

.sidebar p {
  font-size: 1.8rem;
  line-height: 1.1;
  margin: 0 0 45px;
}

.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.sidebar nav a {
  color: black;
  text-decoration: none;
  font-size: 1.5rem;
}

.sidebar nav a:hover {
  text-decoration: underline;
}

.gallery {
  width: 620px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 230px 230px;
  gap: 5px;
}

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

.fish {
  grid-column: 1;
  grid-row: 1;
}

.teague {
  grid-column: 1;
  grid-row: 2;
}

.serpent {
  grid-column: 2;
  grid-row: 1 / 3;
}

@media (max-width: 850px) {
  .site-wrapper {
    grid-template-columns: 1fr;
    padding: 50px 30px;
    gap: 50px;
  }

  .gallery {
    width: 100%;
  }
}

@media (max-width: 550px) {
  .gallery {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .fish,
  .teague,
  .serpent {
    grid-column: auto;
    grid-row: auto;
  }

  .gallery img {
    height: auto;
  }
}