:root {
  --text-1: #f8fafc;
  --text-2: #cbd5e1;
  --surface-1: #020617;
  --surface-2: #0f172a;
  --surface-3: #1e293b;
  --surface-4: #334155;
  --button-surface: #1d4ed8;
  --gradient: linear-gradient(
    to bottom,
    hsla(0 0% 0% / 0) 0%,
    hsla(0 0% 100% / 0.065) 100%
  );
}

.test-wrapper {
    width: min(40rem, 100%);
    margin-inline: auto;
  }


.fifty-fifty {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(var(320px, 250px), 1fr)
  );
}

.card-box {
  overflow: hidden;
  width: 100%;
  border-radius: 0.5rem;
  background-image: var(--gradient);
  box-shadow: inset 0 0 0 1px var(--surface-3);
}

.card-box p {
  color: var(--text-2);
}

.card-box img {
  aspect-ratio: 3 / 2;
  width: 100%;
  height: 100%;
  vertical-align: bottom;
  object-fit: cover;
}

.teaser-box {
  padding: 2rem;
  background-image: var(--surface-gradient);
}

.flow > * + * {
    margin-top: 1rem;
  }