/*
_______________________________________________
=== DEFAULT: COMPACT (0–599px) ===
_______________________________________________
*/

.hero-wrapper {
  position: relative;
  display: block;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.hero-image {
  display: block;
  width: 100%;
  height: auto;
}

.hero-heading {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translateX(-50%);
  color: var(--color-parchment-light);
  text-align: center;
}

.hero-heading .ai-accent {
  color: var(--color-madder-red);
}


/*
_______________________________________________
=== MEDIA: REGULAR (600–1023px) ===
_______________________________________________
*/

@media (min-width: 600px) and (max-width: 1023px) {

  .hero-heading {
    top: 33%;
    font-size: 4.5rem;
  }

}

/*
_______________________________________________
=== MEDIA: LARGE (1024–1439px) ===
_______________________________________________
*/

@media (min-width: 1024px) and (max-width: 1439px) {
  .hero-section {
    display: none;
  }

}


/*
_______________________________________________
=== MEDIA: WIDE (1440px and up) ===
_______________________________________________
*/

@media (min-width: 1440px) {
  .hero-section {
    display: none;
  }

}