.bk-container,
.bk-container-wide {
  margin-inline: auto;
  padding-inline: var(--bk-gutter);
  width: 100%;
}

.bk-container {
  max-width: calc(var(--bk-container) + (var(--bk-gutter) * 2));
}

.bk-container-wide {
  max-width: calc(var(--bk-container-wide) + (var(--bk-gutter) * 2));
}

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

.bk-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bk-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bk-grid--12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

@media (max-width: 64rem) {
  :root {
    --bk-gutter: 1.5rem;
    --bk-section-space: 4.5rem;
  }

  .bk-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 48rem) {
  :root {
    --bk-gutter: 1.125rem;
    --bk-section-space: 3.5rem;
  }

  .bk-grid--2,
  .bk-grid--3 {
    grid-template-columns: minmax(0, 1fr);
  }
}