/**
 * @file
 * Homepage Hero styles
 * Use in templates\paragraph\paragraph--homepage-hero.html.twig
 */

.homepage-hero {
  display: flex;
  flex-direction: column-reverse;
}
.homepage-hero__wrapper {
  background-color: var(--color-primary--1);
  color: var(--color-neutral);
  padding: 2rem
}
.homepage-hero__content {
  max-width: 450px;
}
.homepage-hero__secondary-image {
  padding: 2rem 0;
}
@media screen and (min-width: 700px) {
  .homepage-hero__grid {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
  }
}
@media screen and (min-width: 1024px) {
  .homepage-hero {
    position: relative;
  }
  .homepage-hero__grid {
    max-width: 745px;
    margin-left: auto;
  }
  .homepage-hero__image {
    width: 90%;
    margin-left: auto;
  }
  .homepage-hero__image img {
    margin-left: auto;
  }
  .homepage-hero__wrapper {
    width: 65%;
    position: absolute;
    top: 0;
    left: 0;
    height: 90%;
    align-items: center;
    display: flex;
  }
}
@media screen and (min-width: 1200px) {
  .homepage-hero__wrapper {
    width: 60%;
  }
}
@media screen and (min-width: 1400px) {
  .homepage-hero__wrapper {
    width: 55%;
  }
  .homepage-hero__image img {
    margin-left: auto;
  }
}