/* All Image Grid layout and interactions stay inside this component. */
.cm-image-grid, .cm-image-grid * { box-sizing: border-box; }
.cm-image-grid {
  width: min(var(--cg-section-width), calc(100% - min(var(--cg-section-margin-left), 20%) - min(var(--cg-section-margin-right), 20%)));
  height: var(--cg-section-height);
  min-height: min-content;
  margin: var(--cg-section-margin-top) min(var(--cg-section-margin-right), 20%) var(--cg-section-margin-bottom) min(var(--cg-section-margin-left), 20%);
  padding: var(--cg-section-padding-top) min(var(--cg-section-padding-right), max(0px, calc((var(--cg-section-width) - 20px) / 5))) var(--cg-section-padding-bottom) min(var(--cg-section-padding-left), max(0px, calc((var(--cg-section-width) - 20px) / 5)));
  border: var(--cg-section-border-width) solid var(--cg-border);
  border-radius: var(--cg-section-radius);
  background: var(--cg-background);
  color: var(--cg-foreground);
  display: flow-root;
}
.cm-image-grid__inner {
  container-type: inline-size;
  width: 100%;
  max-width: var(--cg-section-max-width);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(var(--cg-tile-columns), minmax(0, 1fr));
  column-gap: min(var(--cg-tile-gap), 5%);
  row-gap: var(--cg-tile-gap);
}
.cm-image-grid__cell {
  min-width: 0;
  margin: var(--cg-tile-margin-top) min(var(--cg-tile-margin-right), 10%) var(--cg-tile-margin-bottom) min(var(--cg-tile-margin-left), 10%);
}
.cm-image-grid__tile {
  position: relative;
  isolation: isolate;
  height: var(--cg-tile-height);
  width: 100%;
  min-width: 0;
  border: min(var(--cg-tile-border-width), calc(20cqw / var(--cg-tile-columns))) solid var(--cg-normal-border, var(--cg-border));
  border-radius: var(--cg-tile-radius);
  background: var(--cg-tile-background);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.cm-image-grid__art {
  position: absolute;
  inset: min(var(--cg-tile-padding-top), 35%) min(var(--cg-tile-padding-right), 35%) min(var(--cg-tile-padding-bottom), 35%) min(var(--cg-tile-padding-left), 35%);
  border-radius: max(0px, calc(var(--cg-tile-radius) - var(--cg-tile-border-width)));
  overflow: hidden;
}
.cm-image-grid__picture { display: block; width: 100%; height: 100%; }
.cm-image-grid__image {
  display: block;
  width: 100%; height: 100%;
  object-fit: var(--cg-desktop-fit);
  object-position: var(--cg-desktop-position);
  transition: transform 220ms ease;
}
.cm-image-grid__image-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.cm-image-grid__caret {
  --cg-size: min(var(--cg-tile-caret-size), max(0px, calc(100% - 8px)), max(0px, calc(var(--cg-tile-height) - 2 * var(--cg-tile-border-width) - 8px)));
  position: absolute;
  z-index: 2;
  left: clamp(4px, calc(var(--cg-tile-caret-inset) + var(--cg-tile-caret-x)), max(4px, calc(100% - var(--cg-size) - 4px)));
  bottom: clamp(4px, calc(var(--cg-tile-caret-inset) + var(--cg-tile-caret-y)), max(4px, calc(100% - var(--cg-tile-caret-size) - 4px)));
  width: var(--cg-size);
  max-height: calc(100% - 8px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--cg-caret-background);
  color: var(--cg-caret-color);
  border: var(--cg-caret-outline-width) solid var(--cg-caret-outline-color);
  text-decoration: none;
  transition: background-color 180ms ease, color 180ms ease;
}
/* Enlarge small circles' touch area without enlarging their artwork. */
a.cm-image-grid__caret::after { content: ''; position: absolute; inset: min(0px, calc((var(--cg-tile-caret-size) - 44px) / 2)); border-radius: 50%; }
span.cm-image-grid__caret { pointer-events: none; }
@container (max-width: 64px) { .cm-image-grid__caret { display: none; } }
.cm-image-grid__icon { grid-area: 1 / 1; width: 100%; height: 100%; padding: min(var(--cg-tile-caret-padding), 30%); display: grid; place-items: center; }
.cm-image-grid__icon img, .cm-image-grid__icon svg { display: block; width: 100%; height: 100%; object-fit: contain; }
.cm-image-grid__icon--hover { visibility: hidden; }
.cm-image-grid__image-link:focus-visible, a.cm-image-grid__caret:focus-visible { outline: 3px solid var(--cg-accent); outline-offset: -4px; }
a.cm-image-grid__caret:focus-visible { outline-offset: 3px; box-shadow: 0 0 0 3px #000; }
.cm-image-grid__tile:focus-within { border-color: var(--cg-hover-border); }
.cm-image-grid__tile:focus-within .cm-image-grid__caret { background: var(--cg-caret-hover-background); color: var(--cg-caret-hover-color); }
.cm-image-grid__tile:focus-within .cm-image-grid__caret--hover-art .cm-image-grid__icon--normal { visibility: hidden; }
.cm-image-grid__tile:focus-within .cm-image-grid__icon--hover { visibility: visible; }
.cm-image-grid--lift .cm-image-grid__tile:focus-within { transform: translateY(calc(-1 * min(4px, var(--cg-tile-gap) / 4))); }
.cm-image-grid--zoom .cm-image-grid__tile:focus-within .cm-image-grid__image { transform: scale(1.035); }
.cm-image-grid--glow .cm-image-grid__tile:focus-within { box-shadow: inset 0 0 14px var(--cg-hover-border); }
@media (hover: hover) and (pointer: fine) {
  .cm-image-grid__tile:has(a):hover { border-color: var(--cg-hover-border); }
  .cm-image-grid__tile:has(a):hover .cm-image-grid__caret { background: var(--cg-caret-hover-background); color: var(--cg-caret-hover-color); }
  .cm-image-grid__tile:has(a):hover .cm-image-grid__caret--hover-art .cm-image-grid__icon--normal { visibility: hidden; }
  .cm-image-grid__tile:has(a):hover .cm-image-grid__icon--hover { visibility: visible; }
  .cm-image-grid--lift .cm-image-grid__tile:has(a):hover { transform: translateY(calc(-1 * min(4px, var(--cg-tile-gap) / 4))); }
  .cm-image-grid--zoom .cm-image-grid__tile:has(a):hover .cm-image-grid__image { transform: scale(1.035); }
  .cm-image-grid--glow .cm-image-grid__tile:has(a):hover { box-shadow: inset 0 0 14px var(--cg-hover-border); }
}
@media (min-width: 768px) { .cm-image-grid--desktop-hidden { display: none; } }
@media (max-width: 767px) {
  .cm-image-grid--mobile-hidden { display: none; }
  .cm-image-grid__image { object-fit: var(--cg-mobile-fit); object-position: var(--cg-mobile-position); }
}
@media (prefers-reduced-motion: reduce) {
  .cm-image-grid .cm-image-grid__tile, .cm-image-grid .cm-image-grid__image, .cm-image-grid .cm-image-grid__caret { transition: none; }
  .cm-image-grid .cm-image-grid__tile, .cm-image-grid .cm-image-grid__image { transform: none !important; }
}