.focus {
  position: relative;
}

.focus__inner {
  display: grid;
  gap: 1.4rem;
}

.focus__header {
  display: grid;
  gap: 0.82rem;
  max-inline-size: 50rem;
}

.focus__eyebrow {
  inline-size: fit-content;
  font-size: 0.79rem;
  color: #5d38ab;
  background: rgba(124, 58, 237, 0.08);
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: 999px;
  padding: 0.32rem 0.78rem;
}

.focus__title {
  font-size: clamp(1.6rem, 4.9vw, 2.2rem);
  line-height: 1.35;
}

.focus__description {
  color: var(--color-text-muted);
  font-size: 1rem;
}

.focus__grid {
  display: grid;
  gap: 1rem;
}

.focus-card {
  border: 1px solid rgba(229, 231, 235, 0.9);
  border-radius: var(--radius-medium);
  background: var(--color-surface);
  box-shadow: var(--shadow-soft-sm);
  padding: 1.05rem;
  display: grid;
  gap: 0.66rem;
  transition: transform var(--transition-soft), border-color var(--transition-soft), box-shadow var(--transition-soft);
}

.focus-card:hover,
.focus-card:focus-within {
  transform: translateY(-4px);
  border-color: rgba(124, 58, 237, 0.44);
  box-shadow: var(--shadow-soft);
}

.focus-card__eyebrow {
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7280;
}

.focus-card__title {
  font-size: 1.08rem;
  line-height: 1.42;
}

.focus-card__text {
  font-size: 0.93rem;
  color: var(--color-text-muted);
}

.focus-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.44rem;
}

.focus-card__link {
  inline-size: fit-content;
  margin-block-start: 0.2rem;
  font-size: 0.9rem;
  color: #5b21b6;
  border-bottom: 1px solid rgba(124, 58, 237, 0.3);
  transition: color var(--transition-soft), border-color var(--transition-soft);
}

.focus-card__link:hover,
.focus-card__link:focus-visible {
  color: #3b0764;
  border-color: rgba(91, 33, 182, 0.9);
}

@media (min-width: 48rem) {
  .focus__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .focus__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}