body {
text-align: justify; 
margin: 0; 
padding: 0; 
box-sizing: border-box; 
overflow: hidden; 
line-height: 1.5rem; 
min-height: 100vh;
}
.wireframebg {
z-index: -1; 
width: 100%; 
height: 100vh; 
position: absolute;
}
.wireframe {
width: 100%; 
height: 100%; 
position: absolute; 
display: flex; 
justify-content: flex-start; 
align-items: center; 
} 
.wireframe img { 
  width: 16.7rem; 
  height: 50%; 
  object-fit: cover; 
  object-position: center; 
} 
.box { 
  width: 25%; 
  height: 100%; 
  position: relative; 
  z-index: 1; 
  background: linear-gradient(to right, #0a0a0a, transparent); 
} 
.layout { 
  display: grid; 
  grid-template-columns: 16.7rem 1fr; 
  grid-template-rows: auto 1.3fr; 
  gap: 0; 
  grid-auto-flow: row; 
  grid-template-areas: "nav large" "foot large"; } 
.header { 
  grid-area: nav; 
  position: sticky; 
  top: 0; 
  overflow-y: auto; 
}
.logo { 
  box-sizing: border-box; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  height: 100%; 
  padding-top: 2rem; 
} 
.logo img { 
  width: 225px; 
} 
.nav { 
  padding: 0.5rem 0 1rem; 
} 
.nav a { 
  text-decoration: none; 
  font-size: 14px; 
  transition: opacity 0.2s ease; 
} 
.nav a:hover { 
  opacity: 0.6; 
} 
.nav-item { 
  padding: 0 0 0 2.7rem; 
} 
.nav-list { 
  margin: 0; 
  padding: 0; 
} 
.nav ul { 
  display: flex; 
  flex-direction: column; 
  justify-content: flex-end; 
  list-style: none; 
} 
.footer { 
  grid-area: foot; 
  position: absolute; 
  bottom: 0; 
  left: 0; 
  padding: 0 0 0 2.7rem; 
  font-size: 0.9rem; 
  opacity: 0.6; 
  z-index: 1;
} 
.rights { 
  padding-bottom: 0.2rem; 
  padding-top: 0.2rem; 
  letter-spacing: 0.1rem; 
} 
.main { 
  grid-area: large; 
  overflow-y: auto; 
  height: 100vh; 
} 
.gallery { 
  display: grid; 
  grid-template-columns: repeat(auto-fit,minmax(26.7rem, 1fr)); 
  grid-auto-rows: 22.5rem; 
  grid-auto-flow: dense; 
  gap: 0.75rem; 
  margin: 0 1rem 0 0; 
  padding-top: 2rem; 
  padding-bottom: 2rem; 
} 
figure { 
  padding: 0; 
  margin: 0; 
} 
.gallery figure { 
  display: grid; 
  overflow: hidden; 
  grid-template-columns: minmax(0, 1fr); 
  grid-template-rows: minmax(0, 1fr); 
} 
.gallery img { 
  inline-size: 100%; 
  block-size: 100%; 
  object-fit: cover; 
  grid-area: 1 / 1 / -1/ -1; 
  transition: scale 1s ease-in-out; 
  border-radius: 20px;
} 
.gallery figure:hover img { 
  scale: 1.125; 
} 
.gallery figure:nth-child(1) { 
  grid-area: span 2 / span 2; 
} 
.gallery figure:nth-child(4n+1) { 
  grid-column: span 2; 
} 
.gallery figure:nth-child(3n+1) { 
  grid-row: span 2; 
} 
/* RESPONSIVE */ 
@media (max-width: 900px) { 
  .layout { 
    display: flex; 
    flex-direction: column; 
  } 
  .nav { 
    padding: 0; 
    margin: 0 1rem; 
/*flex-direction: row;*/ /*gap: 20px;*/ 
  } 
  .nav ul { 
    flex-direction: row; 
    padding: 0; 
  } 
  .nav-item { 
    padding: 0; 
    margin-right: 0.3rem; 
  } 
  .header { 
    background-color: #0a0a0a; 
  }
  .logo { 
    padding: 0; 
  }
  .logo img { 
  width: 150px; 
  } 
  .site-header { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 100%; 
    position: relative; 
    overflow: hidden; 
  } 
  .footer { 
    display: flex; 
    padding: 0.25rem 1rem; 
    justify-content: space-between; 
    background-color: #0a0a0a; 
  }
  .main { 
    margin-left: 1rem;
    }
}