/**
 * @file
 * Visualization helpers.
 *
 * These styles are used only for visualizing during development.
 */

.content-grid:has(.dev-content-grid__overlay) {
  position: relative;
}

.content-grid > *:not(.dev-content-grid__overlay) {
  position: relative;
  z-index: 1;
}

.dev-content-grid__overlay {
  display: none;
  @media (min-width: 900px) {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 3rem; /* stejný gap! */
    pointer-events: none;
    z-index: 0;
  }
  &.visible > span {
    border-inline: 1px dashed hsl(300 100% 50% / 25%);
  }
}

.dev-content-grid__helper {
  padding-block: 5rem;
  text-align: center;
  & > div:nth-child(odd) {
    background-color: #faf;
  }
  & > div:nth-child(even) {
    background-color: #aff;
  }
  @media (min-width: 900px) {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 3rem;
    row-gap: 3rem;
  }
}