.hero-opera {
  position: sticky;
  top: 0;
  z-index: 0;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
  transform: translateZ(0px);
  backface-visibility: hidden;
}

.hero-opera .hero-opera__content {
    display: flex;
    flex-direction: column;
  }

@media screen and (max-height: 700px) and (max-width: 500px) {

.hero-opera .hero-opera__content {
      min-height:70vh;
      padding-top: 12rem;
  }
      :is(.hero-opera .hero-opera__content) .hero-opera__image-wrap{
        max-width: 19rem!important;
      }
    }

:is(.hero-opera .hero-opera__content) .hero-opera__caption {
      font-family: var(--wp--preset--font-family--body);
      font-size: var(--wp--preset--font-size--medium);
      color: var(--wp--preset--color--contrast);
      font-weight: 700;
      margin-bottom: 1rem;
      font-style: italic;
    }

:is(:is(.hero-opera .hero-opera__content) .hero-opera__caption) .hero-opera__artisti,:is(:is(.hero-opera .hero-opera__content) .hero-opera__caption) .hero-opera__separator {
        font-style: normal;
      }

:is(.hero-opera .hero-opera__content) .hero-opera__image-wrap {
      width: 100%;
      height: 100%;
      max-width: 358px;
      aspect-ratio: 1/1;
    }

:is(:is(.hero-opera .hero-opera__content) .hero-opera__image-wrap) img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
      }

@media screen and (min-width: 1024px) {

:is(.hero-opera .hero-opera__content) .hero-opera__image-wrap {
        max-width: 480px;
    }
      }

:is(.hero-opera .hero-opera__content) .bs-btn {
      align-self: flex-end;
    }

.hero-opera .hero-opera__scroll-down {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--contrast);
    animation: scrollDownAnim 1.5s infinite;
  }

@keyframes scrollDownAnim {
  0% {
    opacity: 0;
    transform: translateY(0);
  }

  50% {
    opacity: 1;
    transform: translateY(10px);
  }

  100% {
    opacity: 0;
    transform: translateY(20px);
  }
}