.duo {
  --duo-title-size: clamp(22px, calc(22px + 8 * var(--fluid-span)), 30px);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
  padding-inline: var(--space-2xl);
  border-radius: var(--radius-xl);
  background: var(--color-surface-plane);
}

.duo-slot {
  display: flex;
  flex-direction: column;
}

.duo-slot__card {
  z-index: 1;
  flex: 1;
}

.duo--dark {
  background: var(--gradient-feature);
  color: var(--color-feature-text);
}

.duo__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--space-xs);
  border-radius: var(--radius-md);
  background: var(--color-surface-card);
  color: var(--color-accent);
  box-shadow: var(--shadow-card);
}

.duo__icon .icon {
  width: 26px;
  height: 26px;
}

.duo--dark .duo__icon {
  background: var(--color-feature-raised);
  color: var(--color-feature-text);
  box-shadow: none;
}

.duo__title {
  font-size: var(--duo-title-size);
  font-weight: var(--text-h2-weight);
  line-height: var(--text-h2-line);
  letter-spacing: var(--text-h2-tracking);
  text-wrap: balance;
}

.duo__text {
  color: var(--color-text-secondary);
}

.duo--dark .duo__text {
  color: var(--color-feature-text-muted);
}

@media (max-width: 767px) {
  .duo {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
    padding-inline: var(--space-lg);
    border-radius: var(--radius-lg);
  }
}