.arena {
  position: relative;
  min-height: 310px;
  margin-top: 24px;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-large);
  isolation: isolate;
  background: url("../../assets/images/arena.webp") 28% 52% / cover no-repeat;
}

.arena::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 16, 48, 0.04) 0 42%, rgba(0, 18, 55, 0.76) 65%, rgba(0, 12, 40, 0.99) 100%);
}

.arena__content {
  width: min(44%, 620px);
  min-height: 310px;
  margin-left: auto;
  display: grid;
  align-content: center;
  padding: 40px clamp(34px, 4vw, 64px);
  background: linear-gradient(90deg, transparent, rgba(0, 19, 57, 0.83) 18%, rgba(0, 14, 45, 0.98));
}

.arena h2 {
  margin: 10px 0 15px;
  font: 700 clamp(2rem, 3vw, 3rem) / 0.98 var(--font-display);
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.arena__content > p:not(.eyebrow) {
  max-width: 540px;
  margin: 0 0 22px;
  color: var(--color-text-muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

.action-button--outline {
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.34);
  background: rgba(0, 20, 58, 0.66);
}

.action-button--outline:hover,
.action-button--outline:focus-visible {
  background: #00316c;
}