/**
 * Image Block Layout-based Aspect Ratios
 *
 * Parent layouts add image-layout--* classes to slots, which control the
 * image aspect ratio automatically. These rules apply both on public pages
 * and inside the Canvas editor.
 */

.image-layout--full-width .image,
.image-layout--standard .image,
.image-layout--grid .image {
  position: relative;
  height: 0;
  overflow: hidden;
  border-radius: var(--border-radius-20);
}

.image-layout--full-width .image img,
.image-layout--standard .image img,
.image-layout--grid .image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}



/* Explicit 1:1 override */
.image-layout--full-width .image.image--100,
.image-layout--standard .image.image--100,
.image-layout--grid .image.image--100 {
  padding-bottom: 100%;
}

/* Standard layout (100% or 50-50): 16:9 */
.image-layout--standard .image {
  padding-bottom: 56.25%;
}

/* Grid layout (thirds or quarters): 16:9 mobile, 1:1 desktop */
.image-layout--grid .image {
  padding-bottom: 56.25%;
}

@media (min-width: 768px) {
  .image-layout--grid .image {
    padding-bottom: 100%;
  }
}