main {
  position: relative;
}

.banner-box {
  position: absolute;
  background-color: #5f9ea070;
  left: 0;
  bottom: 0;
  border-radius: 1rem;
  animation-delay: 0.3s;
  padding: 1.5rem;
  animation-delay: 1s;

}

.banner {
  font-size: clamp(1.125rem, 0.8704rem + 1.358vw, 2.5rem);
  text-align: left;
  color: whitesmoke;
  line-height: 1.4;
  font-weight: 600;
}

h1.banner {
animation-delay: 1s;
color: antiquewhite;
}

div.banner {
  animation-delay: 1.4s;
  /* animation-duration: 1.5s; */

}

.img-box {
  animation-delay: 0.2s;

}

img {
  height: 100vh;
  height: 100svh;
  width: 100%;
  object-fit: cover;
  object-position: bottom;
}

@keyframes imgshow {
  0% {
    object-position: left;
  }

  50% {
    object-position: right;
  }

  100% {
    object-position: left;

  }
}

@media only screen and (max-width: 600px){
.img-box {
  animation-delay: 0s;
}

  img {
  animation-name: imgshow;
  animation-duration: 15s;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  }
}