:root {
  --navy-dark: #0F172A;
  --navy: #192339;
  --white: #FFFFFF;
  --light: #E5E7EB;
  --black: #000000;
}

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

body {
  font-family: 'Poppins', sans-serif;
  background: var(--navy-dark);
  color: var(--white);
  display: block;
  min-height: 100vh;
}


header {
  background: var(--navy-dark);
  text-align: center;
  padding: 60px 20px 40px;
  border-bottom: 4px solid var(--navy);
}

header h1 {
  font-size: clamp(48px, 8vw, 96px);
  font-weight: 700;
  text-align: center;
      grid-column: 1;
    grid-row: 1;
    z-index: 1; /* Sit on top of the image */
    width: 100%;
    transform: translateY(2rem);
    opacity: 0;
    animation: fadeInUp 0.6s ease-out forwards;
    animation-delay: 0.6s; 
}


.main {
  background: var(--light);
  padding: 60px 20px;
  display: grid;
  justify-content: center;
  gap: 40px;
}
    #gallery{
        display: grid;
        /* grid-template-columns: 1fr 1fr 1fr;  */
        grid-template-columns: repeat(3, 1fr); 
        
        /* grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); */
        padding: 0.482rem;

        gap: 0.482rem;
        place-items: center;
    }

    .grid-item{
        text-align: center;
        padding: 5px;
    }


figcaption {
  width: 100%;
  text-align: center;
  font-size: 0.833rem;
  color: rgb(16 16 16 /1);
}

 #gallery figure{
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 16/9;
 }

 #gallery figure:hover img{
    transform: scale(1.2);
    
  }

#gallery img, header img{
  width: 100%;

}

#gallery img{
  max-width: 100%;
  object-fit: cover;
  aspect-ratio: 16/9;
  transition: transform 0.5s;
}



header img{
  max-width: 1600px;

}

#gallery figcaption, dialog figcaption{
  transform: translateY(-1.482rem);
  background: rgb(240 240 240 / 0.7);
}

dialog{
  max-width: 95vw;
  max-height: 95vh;
  overflow: hidden;
  margin: 0 auto;
  top: 10vh;
}

dialog img{
  max-width: 90vw;
  max-height: 80vh;

}

footer {
  margin-top: auto;
  background: var(--navy);
  text-align: center;
  padding: 16px;
  font-size: 14px;
  opacity: 0.8;
}

@keyframes fadeInUp {
  0%{
    opacity: 0;
    transform: translateY(2.44rem);
  }
  100%{
    opacity: 1;
    transform: translateY(0);
  }
  
  
}

@media screen and (min-width: 550px) {
  header img{
    aspect-ratio: 16/6;
    object-fit: cover;
    object-position: center center;
  }
}