/**
 * Hero Homepage paragraph
 * Library hero-homepage used in
 * - paragraph--hero-homepage.html.twig
 */


/**
 * Global style
 */

.path-frontpage .section--primary-normal:first-child {
  background-color: var(--color-primary--6);
}
.hero-homepage {
  display: flex;
  flex-direction: column;
  padding-top: 2rem;
  padding-bottom: 2rem;
  gap: 3rem;
  position: relative;
}
.hero-homepage h1 {
  color: #414158;
  text-transform: uppercase;
  font-weight: 800;
  line-height: 130%;
  font-size: 1.5rem;
  margin: 0;
}
.hero-homepage h1 span {
  position: relative;
  z-index: 0;
}
.hero-homepage h1 span::after {
  transition: all 150ms;
  display: block;
  content: "";
  position: absolute;
  height: 14px;
  background-color: var(--color-secondary--4);
  top: 50%;
  left: -2px;
  right: -2px;
  z-index: -1;
}
.hero-homepage__bottom {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
@media all and (min-width: 750px){
  .hero-homepage {
    gap: 4rem;
  }
  .hero-homepage h1 {
    font-size: 3rem;
  }
  .hero-homepage h1 span::after {
    top: 56%;
    height: 21px;
  }
}
@media all and (min-width: 1000px) {
  .path-frontpage .section--primary-normal:first-child {
    background-color: var(--color-primary--5);
  }
  .hero-homepage {
    padding-top: 4.5rem;
    padding-bottom: 3.625rem;
  }
  .hero-homepage::before {
    position: absolute;
    content: '';
    top: -50px;
    left: 37%;
    background-image: url('/themes/custom/editionsprivat/images/privat-hero.svg');
    width: 761.66px;
    height: 200px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    scale: 0.5;
  }
  .hero-homepage__bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}
@media all and (min-width: 1200px) {
  .hero-homepage::before {
    top: -30px;
    left: 40%;
    scale: 0.7;
  }
}
@media all and (min-width: 1500px) {
  .hero-homepage::before {
    top: 0;
    scale: 1;
  }
}


/**
 * Hero homepage categories
 */

.hero-homepage__categories h2 {
  font-family: 'Raleway';
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-primary--1);
}
@media all and (min-width: 1000px) {
  .hero-homepage__categories h2 {
    display: none;
  }
}