/* Container moved to index.astro to avoid conflicts */

.section {
  container-type: inline-size;
  padding: var(--section-gap) 0;
}

.grid {
  display: grid;
  gap: var(--grid-gap);
}

.grid-auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.grid-2-cols {
  grid-template-columns: 1fr;
}

@container (min-width: 768px) {
  .grid-2-cols {
    grid-template-columns: 1fr 1fr;
  }
}

/* Hero specific layout */
.hero-layout {
  container-type: inline-size;
  min-height: 100vh;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  padding: var(--section-gap) var(--content-inset);
}

/* Content block layout */
.content-block {
  container-type: inline-size;
  max-width: var(--content-width);
  margin-inline: auto;
  margin-block: var(--section-gap);
  padding: var(--section-gap) var(--content-inset);
  border-radius: var(--radius-card);
}

.content-header {
  display: grid;
  gap: var(--grid-gap);
  margin-bottom: var(--grid-gap);
}

@container (min-width: 768px) {
  .content-header {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.content-grid {
  display: grid;
  gap: var(--grid-gap);
}

@container (min-width: 768px) {
  .content-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--grid-gap) calc(var(--grid-gap) * 1.33);
  }
}