.hero-image-lg-wrapper {
     position: absolute;
     top: 72%;
     right: 0%;
     transform: translateY(-50%);
 }

 .hero-img-lg {
     width: 520px;
     height: auto;
     opacity: 0.95;
     filter: drop-shadow(0 30px 45px rgba(0, 0, 0, 0.35));
     z-index: 60;
 }

    /* Small devices */
   @media (min-width: 320px) and (max-width: 376px) {
     .hero-image-lg-wrapper {
         top: 97%;
         right: 0%;
     }

     .hero-img-lg {
         width: 350px;
         height: 260px;
     }
 }

  @media (min-width: 376px) and (max-width: 426px) {
     .hero-image-lg-wrapper {
         top: 95%;
         right: 0%;
     }

     .hero-img-lg {
         width: 370px;
         height: 280px;
     }
 }

 /* Medium devices */
   @media (min-width: 426px) and (max-width: 767px) {
     .hero-image-lg-wrapper {
         top: 95%;
         right: 0%;
     }

     .hero-img-lg {
         width: 380px;
         height: 290px;
     }
 }

 /* Tablet/Large devices */
 @media (min-width: 767px) and (max-width: 900px) {
     .hero-image-lg-wrapper {
         top: 88%;
         right: 0%;
     }

     .hero-img-lg {
         width: 450px;
         height: 350px;
     }
 }

  /* Tablet/Large devices */
 @media (min-width: 900px) and (max-width: 1062px) {
     .hero-image-lg-wrapper {
         top: 88%;
         right: 0%;
     }

     .hero-img-lg {
         width: 520px;
         height: 400px;
     }
 }
 
 /* Laptops */
 @media (min-width: 1062px) and (max-width: 1200px) {
     .hero-image-lg-wrapper {
         top: 85%;
         right: 0%;
        }
        
        .hero-img-lg {
            width: 580px;
            height: 450px;
        }
    }

/* Small desktops */
 @media (min-width: 1200px) and (max-width: 1280px) {
     .hero-image-lg-wrapper {
         top: 80%;
         right: 0%;
     }

     .hero-img-lg {
         width: 640px;
         height: 490px;
     }
 }

 /* XL desktops */
 @media (min-width: 1280px) {
     .hero-image-lg-wrapper {
         top: 76%;
         right: 0%;
     }

     .hero-img-lg {
         width: 650px;
         height: 520px;
     }
 }

 /* Large desktops / ultra-wide */
 @media (min-width: 1536px) {
     .hero-img-lg {
         width: 760px;
         height: 580px;
     }
 }

 /* Animations */
 .slide-in {
     animation: slideIn 0.45s ease-out forwards;
 }

 .slide-out {
     animation: slideOut 0.35s ease-in forwards;
 }

 @keyframes slideIn {
     from {
         transform: translateY(0.6em);
         opacity: 0;
     }

     to {
         transform: translateY(0);
         opacity: 1;
     }
 }

 @keyframes slideOut {
     from {
         transform: translateY(0);
         opacity: 1;
     }

     to {
         transform: translateY(-0.6em);
         opacity: 0;
     }
 }