*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.sg-container {
  width: min(calc(100% - 2rem), var(--sg-container));
  margin: 0 auto;
}

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

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

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

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

.sg-hero {
  position: relative;
  overflow: hidden;
  min-height: 32rem;
  display: flex;
  align-items: end;
  padding: var(--sg-space-72) 0 var(--sg-space-48);
  background:
    linear-gradient(rgba(17, 17, 17, 0.55), rgba(17, 17, 17, 0.65)),
    radial-gradient(circle at top right, rgba(255, 221, 45, 0.25), transparent 24rem),
    linear-gradient(135deg, #2f2f2f, #111111);
  color: var(--sg-color-text-inverse);
}

@media (max-width: 900px) {
  .sg-grid-2,
  .sg-grid-3,
  .sg-grid-4 {
    grid-template-columns: 1fr;
  }

  .sg-hero {
    min-height: 24rem;
    padding-top: var(--sg-space-48);
  }
}