* {
  --fadeUp-speed: 0.75s;
  --fadeUp-easing: ease;
}

[fadeUp],
[fade-up],
[animation-fadeUp],
[animation-fade-up],
[animation="fadeUp"],
[animation="fadeup"],
[animation="fade-up"] {
  animation: fade-up 0.75s ease;
}

/* img {
  opacity: 0;
} */

/* img.animate {
  animation: fadeIn 600ms ease forwards;
} */


section {
  content-visibility: auto;
  contain-intrinsic-size: 1px 500px;
}

.header-images {
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
}

.header-images img {
  opacity: 1 !important;
  height: 10vw !important;
  width: 23% !important;
}

.header-img {
  opacity: 1 !important;
}

/* Base state */
.reveal-group {
  display: flex;
  gap: 8px;
}

.test-image,
.reveal-group div,
.reveal {
  width: 100%;
  max-width: 500px;
  height: 300px;
  background-color: #ddd;
  margin-bottom: 8px;
  object-fit: cover;
}

.reveal, 
[data-anim] {
  opacity: 0;
  /* transform: translateY(20px); */
  transition: 
    transform 600ms ease, 
    opacity 600ms ease;
  will-change: transform, opacity;
}

/* Active state */
.is-visible {
  opacity: 1;
  transform: none !important;
}

/* Variants */
[data-anim="fade-in"] {
  transform: none;
}

[data-anim="fade-up"] {
  transform: translateY(100px);
}

[data-anim="scale"] {
  transform: scale(0.9);
}

@media (prefers-reduced-motion: reduce) {
  img,
  [data-anim] {
    transition: none;
    opacity: 1;
    transform: none;
  }
}