.section--hero {
  position: relative;
}

.section--hero__image {
  position: relative;
}

.section--hero__title {
  margin-bottom: var(--adebeo-spacing-m);
}

.section--hero__title strong {
  color: var(--adebeo-color-primary);
}

.section--hero__content {
  position: relative;
  z-index: 2;
}

.section--hero__cta {
  margin-top: var(--adebeo-spacing-gap);
}

@media (max-width: 1023px) {
  .section--hero__image {
    position: absolute;
    top: -70px;
    right: -4vw;
    width: 62%;
    height: 100%;
    object-fit: contain;
    opacity: 0.5;
  }
  body:not(.home) .section--hero__image {
    width: calc(95vw);
    height: calc(100% + 140px);
  }
  .section--hero:has(.section--hero__content .button) .section--hero__button {
    display: none;
  }
  .section--hero__button {
    position: relative;
    width: 100%;
    text-align: center;
    margin-top: var(--adebeo-spacing-m);
    padding-bottom: var(--adebeo-spacing-l);
    cursor: pointer;
  }
  .section--hero__button:after {
    content: '';
    width: 17px;
    height: 25px;
    position: absolute;
    bottom: 0;
    left: calc(50% - 8.5px);
    background: url('data:image/svg+xml,<svg width="17" height="25" viewBox="0 0 17 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.996368 16.1816L8.49637 23.6816L15.9964 16.1816" stroke="%23D54414" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M8.49631 1.18152L8.49631 23.6815" stroke="%23D54414" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>')
      no-repeat center bottom;
    animation: arrow-hero 1s infinite alternate;
  }
}

@keyframes arrow-hero {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(5px);
  }
}

@media (max-width: 600px) {
  body:not(.home) .section--hero__image {
    height: 100%;
  }
}

@media (min-width: 1024px) {
  .section.section--hero {
    margin-top: 0;
    display: grid;
    grid-template-columns: 48% auto;
    gap: var(--adebeo-spacing-inner);
  }
  body.home .section.section--hero {
    grid-template-columns: 2fr 1fr;
  }
  .section--hero__content {
    margin: var(--adebeo-spacing-2xl) 0 0;
  }
  .section--hero__image {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
  }
  .section--hero__image img {
    position: absolute;
    top: -15%;
    right: -4.5vw;
    width: 135%;
    max-width: 600px;
    opacity: 0.75;
    height: auto;
  }
}

@media (min-width: 1921px) {
  .section--hero__image img {
    top: -19%;
    max-width: 832px;
    right: -2vw;
  }
}

@media (max-width: 1023px) and (min-width: 768px) {
  .section--hero__image {
    top: -130px;
  }
}