.children-grid{
    display: grid;
}

@media screen and (min-width: 992px) {
    .children-grid{
        grid-template-columns: repeat(12, 1fr);
    }
}

.children-grid .child-item, .thumbnail-block-link{
    display: flex;
    flex-direction: column;
    gap: var(--size-s);
}

figcaption{
    color: grey;
}

.text-block{
    display: grid;
}

.footer .list-block{
        opacity: 1;
        transform: translateY(0);
}


/* General container for images */
figure.image, figure.video {
    position: relative;
    align-self: start;
    width: 100%;
    /* The aspect-ratio will be applied via inline style from PHP for raster images */
}

.image img, .video video{
    height: 100%;
}


/* Styling for raster images (WebP, JPEG, GIFs) - both placeholder AND final image */
/* These will fill the aspect-ratio constrained figure */
.image img.is-raster-image {
  display: block; /* Removes extra space below inline elements */
  width: 100%;    /* Image fills the width of its parent */
  height: 100%;   /* Image fills the height of its parent (constrained by aspect-ratio) */
  object-fit: cover; /* This is typically what you want for photos: fill the space, crop if necessary */
  object-position: center; /* Center the image within its box */
}

/* Styling for SVGs (images WITHOUT the .is-raster-image class) */
/* These containers will NOT have the aspect-ratio styling from PHP */
.image img:not(.is-raster-image) {
  display: block;
  max-width: 100%; /* Prevents SVG from overflowing its container */
  height: auto;    /* Crucial for SVGs to maintain their own aspect ratio naturally */
  object-fit: contain; /* SVGs often look best when they fit entirely within their space */
  margin: 0 auto;  /* Centers smaller SVGs horizontally */
}