body {
  margin: 0;
}

.grid {
  display: grid;
  min-height: 100vh;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 12vh 10vh 33vh 33vh 12vh;
  grid-template-areas:
    "masthead masthead masthead masthead"
    "nav      nav      nav      nav"
    "hero     hero     card-a   sidebar"
    "hero     hero     card-b   sidebar"
    "footer   footer   footer   footer";
}

.cell {
  display: flex;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  padding: 1rem;
  border: 2px solid white;
  background-color: #e7ddcf;
}

.cell img {
  transition: transform 0.3s ease; 
  cursor: pointer; 
}

.cell img:hover {
  transform: scale(1.05); 
}

.masthead {
  font-family: "Bungee", sans-serif;
  align-items: center;
  font-size: 60px;
  letter-spacing: 3px;
  grid-area: masthead;
  background-color: #141728;
  color: #f5f5f5;
}

.nav {
  grid-area: nav;
  background-color: #f1e9dc;
  font-weight: 500;
  font-family: "Cormorant Garamond", serif;
  font-size: 30px;
}

.nav li:hover {
  text-decoration: underline;
}

.nav ul {
  display: flex;          
  justify-content: center; 
  align-items: center;
  gap: 2rem;                
  flex-wrap: wrap;
  list-style: none;  
  margin: 0;
  padding: 0;
}

.nav li {
  cursor: pointer;
  font-weight: 700;
}

.hero {
  grid-area: hero;
  overflow: hidden;
  padding: 0;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero img {
  width: 110%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.card-a {
  grid-area: card-a;
  overflow: hidden;
  padding: 0;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left;
}
.card-b {
  grid-area: card-b;
  overflow: hidden;
  padding: 0;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-b img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.sidebar {
  grid-area: sidebar;
  overflow: hidden;
  padding: 0;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sidebar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left;
}

.footer {
  grid-area: footer;
  background-color: #141728;
  color: #f5f5f5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.footer h4 {
  margin: 0 0 0.5rem 0;
  font-size: 1.2rem;
}

.footer p {
  margin: 0;
  line-height: 1.5;
  font-size: 1rem;
}

@media screen and (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr; 
    grid-template-rows: 10vh 10vh 30vh 13vh 13vh 14vh 10vh;
    grid-template-areas:
      "masthead"
      "nav"
      "hero"
      "card-a"
      "card-b"
      "sidebar"
      "footer";
  }

  .masthead {
    font-size: 36px; 
  }
  
  .nav {
    font-size: 13px; 
    padding: 0.5rem 0; 
  }

  .nav ul {
    flex-direction: column; 
    gap: 1rem; 
    align-items: center; 
  }

  .nav li {
    font-weight: 600; 
    
  }
  .hero img,
  .card-a img,
  .card-b img,
  .sidebar img {
    width: 100%;       
    height: auto;      
    object-fit: contain; 
  }

  .footer {
    padding: 1rem;
  }

  .footer h4 {
    font-size: 1rem;
  }

  .footer p {
    font-size: 0.85rem;
  }
}