/**
 * Broker Design System — Layout
 */
.brk-container {
  width: min(calc(100% - (var(--brk-gutter) * 2)), var(--brk-container));
  margin-inline: auto;
}

.brk-content {
  width: min(calc(100% - (var(--brk-gutter) * 2)), var(--brk-content));
  margin-inline: auto;
}

.brk-section {
  padding-block: clamp(48px, 7vw, 96px);
}

.brk-stack {
  display: flex;
  flex-direction: column;
  gap: var(--brk-sp-6);
}

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

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

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

.brk-hero-shell {
  border-radius: var(--brk-radius-xl);
  background: var(--brk-charcoal);
  color: var(--brk-ivory);
  padding: clamp(32px, 6vw, 80px);
}

@media (max-width: 900px) {
  .brk-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  :root {
    --brk-gutter: 14px;
    --brk-radius-xl: 26px;
    --brk-radius-lg: 22px;
  }

  .brk-grid--2,
  .brk-grid--3 {
    grid-template-columns: 1fr;
  }

  .brk-section {
    padding-block: 48px;
  }

  .brk-btn {
    min-height: 46px;
  }
}