/**
 * Hero Basic component style.
 */
.hero-basic {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--s-xl);
  justify-content: space-between;
}
@media (min-width: 980px) {
  .hero-basic {
    flex-direction: row;
    gap: var(--s-4xl);
  }
}
.hero-basic .hero-basic__media {
  flex-basis: 50%;
}
.hero-basic .hero-basic__content {
  display: flex;
  flex-basis: 50%;
  flex-direction: column;
  padding: 0 var(--s-lg);
}
@media (min-width: 500px) {
  .hero-basic .hero-basic__content {
    padding: 0;
  }
}
.hero-basic .hero-basic__header {
  display: flex;
  flex-direction: column;
}
.hero-basic .hero-basic__header .headline {
  margin-bottom: var(--s-xs);
}
.hero-basic .hero-basic__text {
  margin-top: var(--s-lg);
  font-size: var(--text-base);
}
.hero-basic .c-link {
  margin-top: var(--s-xl);
}
@media (min-width: 980px) {
  .hero-basic .c-link {
    margin-top: var(--s-3xl);
  }
}
.hero-basic .c-image {
  aspect-ratio: 16/9;
  object-fit: cover;
}