.hero {
     &.wrapper {
          position: relative;
          height: 40rem;
          overflow-x: clip;
     }

     .overlay {
          display: flex;
          align-items: flex-end;
          justify-content: space-between;
          height: 100%;
          width: min(var(--wp--style--global--content-size), 100%);
          margin-inline: auto;
          padding-bottom: 4rem;

          @media screen and (max-width:50rem) {
               flex-direction: column-reverse;
               justify-content: flex-start;
               padding-bottom: 0;
          }
     }

     .text {
          position: relative;
          width: 100%;
          max-width: 32.5rem;

          padding: 2rem 2rem 3rem;

          color: white;
          background-color: rgba(0, 0, 0, 0.5);

          @media screen and (max-width:50rem) {
               max-width: 100%;
               padding: 3rem 2rem 4rem;
          }

          h2 {
               font-size: var(--wp--preset--font-size--max-36);
               font-weight: 400;
               margin: 0;
          }

          .button-pos {
               position: absolute;
               right: 3rem;
               bottom: -1.5rem;

               @media screen and (max-width:50rem) {
                    right: 0;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 100%;
                    text-align: center;
               }
          }
     }

     .products {
          position: relative;

          @media screen and (max-width:50rem) {
               position: relative;
               margin-bottom: -1.5rem;
               z-index: 1;
          }

          .product {
               position: absolute;
               bottom: 0;
               right: 0;

               display: none;

               max-height: 20rem;
               max-width: 20rem;
               object-fit: contain;

               opacity: 0;
               transition-property: display opacity;
               transition-duration: 1500ms;
               transition-behavior: allow-discrete;

               &.active{
                    display: block;
                    opacity: 1;

                    @starting-style {
                         opacity: 0;
                    }

                    animation-name: slideIn;
                    animation-duration: 1000ms;
               }
               @media screen and (min-width:50rem) {
                    &:hover{
                         transform: translateY(-3rem) rotate(-3deg);
                         -webkit-filter: drop-shadow(0px 20px 15px #222);
                         filter: drop-shadow(0px 20px 15px #222)
                    }
               }
          }
     }

     .bg_image {
          position: absolute;
          inset: 0;

          width: 100%;
          height: 100%;

          object-fit: cover;
          object-position: center center;

          opacity: 0;
          transition: opacity 2500ms ease-in-out;

          z-index: -1;

          &.active{
               opacity: 1;
          }
     }
}

@keyframes slideIn {
     from {
          transform: translateX(150%);
     }

     to {
          transform: translateX(0);
     }
}