.age-modal-overlay {
  background: rgba(7, 4, 2, 0.9);
}

.age-modal {
  max-width: 640px;
  background: #FDFBF5;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.age-modal__image {
  display: none;
  background-image: linear-gradient(135deg, rgba(12, 8, 4, 0.35), rgba(12, 8, 4, 0.85)), url('https://images.pexels.com/photos/262978/pexels-photo-262978.jpeg?auto=compress&cs=tinysrgb&w=1200');
  background-size: cover;
  background-position: center;
  min-height: 220px;
}

.age-modal__inner {
  padding-top: var(--space-6);
}

.age-modal__actions {
  margin-top: var(--space-4);
}

.age-modal__btn {
  font-size: var(--font-size-xs);
}

@media (min-width: 720px) {
  .age-modal {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.35fr);
  }

  .age-modal__image {
    display: block;
  }

  .age-modal__inner {
    padding-top: var(--space-8);
    padding-bottom: var(--space-8);
  }
}

.age-modal-overlay:focus-visible,
.age-modal:focus-visible,
.age-modal__btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}