@layer layout {

.full-bleed {
  width: 100%;
  position: relative;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4xl);
}
@media (min-width: 993px) {
  .grid-2 { grid-template-columns: 1fr 1fr; gap: var(--space-5xl); }
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
@media (min-width: 769px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

section {
  position: relative;
}

}