/**
 * @file
 * Hero paragraph
 * Use in paragraph--hero.html.twig
 */

.hero {
  padding: 2rem 0;
}
.hero__wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.hero h1 {
  font-size: var(--stylized-title-xxl);
  line-height: 125%;
}
.hero h1.stylized-title-xl {
  font-size: var(--stylized-title-xl);
}
.hero__title h1 {
  margin: 0 0 1rem;
}
.hero__intro {
  max-width: 372px;
  margin-bottom: 2em;
}
@media all and (min-width: 768px) {
  .hero {
    padding: 6rem 0;
  }
  .hero__wrapper {
    flex-direction: row;
    justify-content: space-between;
  }
  .hero__title,
  .hero__image {
    width: 50%;
  }
  .hero h1 {
    font-size: var(--stylized-title-xl);
  }
}
@media all and (min-width: 1200px) {
  .hero {
    padding: 9.5rem 0;
  }
  .hero__primary {
    gap: 30px;
  }
  .hero h1 {
    font-size: var(--stylized-title-xxl);
  }
  .hero__intro {
    /* margin-left: 80px; */
  }
}
@media all and (min-width: 1300px){
  .hero__title {
    padding-left: 10%;
  }
}