body{
   background-color: #F0EBE3;

   font-size: 16px;
   font-family: "Unica";

}



.article-image {
  background-position: center;     /* was top center */
  background-repeat: no-repeat;
  background-size: contain;        /* show full image, not zoomed */
  width: 100%;
  aspect-ratio: 16/9;              /* keeps proportional height */
  margin-top: 40px;
  text-align: center;
  box-shadow: 0 0 70px #B7BCCB;
}

h2 {
  text-align: center;
}

#first-image {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;        /* was cover → avoids cropping */
  width: 100%;
  aspect-ratio: 16/9;
  margin-top: 40px;
  box-shadow: 0 0 70px #B7BCCB;
}

#second-image {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;        /* was 90% auto */
  width: 100%;
  aspect-ratio: 16/9;
  margin-top: 0;                   /* fixed typo: was marigin-top */
  text-align: center;
}

/* --- Responsive & gallery --- */
@media (min-width: 1200px) {
  #article {
    background-color: #EEEEFF;
    text-align: center;
    margin-top: 30px;
    padding: 40px;
  }

  .gallery {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #first-image,
  .gallery img {
    opacity: 0; /* Start with invisible images */
    transition-property: opacity;
    transition-duration: 0.8s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
  }

  #first-image,
  .gallery img.visible {
    opacity: 1; /* End with fully visible images */
  }
}

@media (min-width: 769px) and (max-width: 1199px) {
  #article {
    background-color: #EEEEFF;
    text-align: center;
    margin-top: 30px;
    padding: 40px;
  }

  .gallery {
    margin-top: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
  }

  .gallery img {
    width: 95%;
  }

  #first-image,
  .gallery img {
    opacity: 0; /* Start with invisible images */
    transition-property: opacity;
    transition-duration: 0.8s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
  }

  #first-image,
  .gallery img.visible {
    opacity: 1; /* End with fully visible images */
  }
}

@media (max-width: 768px) {
  #article {
    background-color: #EEEEFF;
    text-align: center;
    margin-top: 30px;
    padding: 40px;
  }

  .gallery {
    margin-top: 40px;
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.8s ease-in-out;
    transition-property: opacity;
    transition-duration: 0.8s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
  }

  .gallery img {
    width: 95%;
  }

  #first-image,
  .gallery img {
    opacity: 0; /* Start with invisible images */
    transition-property: opacity;
    transition-duration: 0.8s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
  }

  #first-image,
  .gallery img.visible {
    opacity: 1; /* End with fully visible images */
  }
}