/* Structural defaults for reusable blocks. Desktop recipes are in page-layouts.css. */
.content-row {
  width: var(--row-width, 100%);
  margin: var(--space, 20px) auto 0;
  grid-template-columns: var(--columns, repeat(var(--child-columns, 1), minmax(0, 1fr)));
}
.content-row[data-children="2"] { --child-columns: 2; }
.content-row[data-children="3"] { --child-columns: 3; }
.content-row[data-children="4"] { --child-columns: 4; }
.content-stack { grid-template-columns: minmax(0, 1fr); }
.content-section { min-height: var(--section-height, 0px); }
.icon-set {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 36px;
}
.icon-set-item { min-width: 0; }

@media (max-width: 1000px) {
  .icon-set { gap: 24px; }
}
@media (max-width: 600px) {
  .content-section { min-height: 0; }
  .content-row {
    width: 100%;
    margin-top: min(var(--space, 24px), 24px);
    grid-template-columns: minmax(0, 1fr);
  }
  .content-row.icon-set {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}