.page-hero {
  background: var(--color-surface);
  border-radius: clamp(3.125rem, 2.5rem + 3.125vw, 6.25rem) 0
    clamp(3.125rem, 2.5rem + 3.125vw, 6.25rem) 0;
  min-height: clamp(19.5rem, 17.675rem + 9.125vw, 28.625rem);
  display: flex;
}

.page-hero--black-coffee {
  background: var(--color-primary);
}

.page-hero--coffee {
  background: var(--color-accent-green);
}

.page-hero--accessories {
  background: var(--color-primary-blog);
}

.page-hero--cups {
  background: var(--color-hero-cups);
}

.page-hero--blog {
  background: var(--color-hero-blog);
}

.page-hero--blog .page-hero__media {
  width: clamp(16.25rem, 12rem + 21.25vw, 37.5rem);
}

.page-hero__wrapper {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.875rem, 1rem + 4.375vw, 6.25rem);
  text-align: center;
  padding: var(--space-l) 0;
}

.page-hero__title {
  font-family: var(--font-body-extrabolt);
  font-size: clamp(2.375rem, 1.475rem + 4.5vw, 6.875rem);
  line-height: clamp(2.625rem, 1.375rem + 6.25vw, 8.875rem);
  text-transform: none;
}

.page-hero__title--black-coffee,
.page-hero__title--accessories {
  color: var(--color-text-invert);
}

.page-hero__title--cups {
  color: var(--color-surface-alt);
}

.page-hero__title--coffee {
  color: var(--color-primary);
}

.page-hero__media {
  width: clamp(8.375rem, 6.65rem + 8.625vw, 17rem);
  height: auto;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .page-hero__inner {
    flex-direction: row;
    align-items: center;
  }
}