<div class="wrapper-images">
  <div class="images-line">
    <div class="line large" style="background-image:url(https://images.unsplash.com/photo-1561037404-61cd46aa615b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1470&q=80)"></div>
    <div class="line" style="background-image:url(https://images.unsplash.com/photo-1543466835-00a7907e9de1?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1074&q=80)"></div>
    <div class="line" style="background-image:url(https://images.unsplash.com/photo-1587300003388-59208cc962cb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1470&q=80)"></div>
    <div class="line large" style="background-image:url(https://images.unsplash.com/photo-1561037404-61cd46aa615b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1470&q=80)"></div>
    <div class="line" style="background-image:url(https://images.unsplash.com/photo-1543466835-00a7907e9de1?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1074&q=80)"></div>
    <div class="line" style="background-image:url(https://images.unsplash.com/photo-1587300003388-59208cc962cb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1470&q=80)"></div>
  </div>
  <div class="images-line">
    <div class="line" style="background-image:url(https://images.unsplash.com/photo-1537151625747-768eb6cf92b2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=685&q=80)"></div>
    <div class="line large" style="background-image:url(https://images.unsplash.com/photo-1583512603805-3cc6b41f3edb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=880&q=80)"></div>
    <div class="line" style="background-image:url(https://images.unsplash.com/photo-1588943211346-0908a1fb0b01?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=735&q=80)"></div>
    <div class="line" style="background-image:url(https://images.unsplash.com/photo-1537151625747-768eb6cf92b2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=685&q=80)"></div>
    <div class="line large" style="background-image:url(https://images.unsplash.com/photo-1583512603805-3cc6b41f3edb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=880&q=80)"></div>
    <div class="line" style="background-image:url(https://images.unsplash.com/photo-1588943211346-0908a1fb0b01?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=735&q=80)"></div>
  </div>
  <div class="images-line">
    <div class="line " style="background-image:url(https://images.unsplash.com/photo-1583511655826-05700d52f4d9?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=688&q=80)"></div>
    <div class="line" style="background-image:url(https://images.unsplash.com/photo-1517849845537-4d257902454a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=735&q=80)"></div>
    <div class="line large" style="background-image:url(https://images.unsplash.com/photo-1534551767192-78b8dd45b51b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80)"></div>
    <div class="line " style="background-image:url(https://images.unsplash.com/photo-1583511655826-05700d52f4d9?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=688&q=80)"></div>
    <div class="line" style="background-image:url(https://images.unsplash.com/photo-1517849845537-4d257902454a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=735&q=80)"></div>
    <div class="line large" style="background-image:url(https://images.unsplash.com/photo-1534551767192-78b8dd45b51b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80)"></div>
  </div>
</div>
<div class="container">
  <div class="logo">
    <img src="https://www.design-fenix.com.ar/natural-logo.png" alt="Natural Pet Bakery">
  </div>
  <nav class="menu">
    <a href="https://www.instagram.com/stories/highlights/17873397626383767/">🐶 Clientes</a>
    <a href="https://www.instagram.com/stories/highlights/17860817942544583/">Nuestros Productos</a>
    <a href="https://www.instagram.com/stories/highlights/17888680058390863/">Precio de Envios</a>
    <a href="https://wa.me/5491168400468">👍 Whatsapp</a>
  </nav>
</div>

@import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700");
body {
  background: #f7f7f7;
  overflow: hidden;
}
.container {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
  z-index: 5;
  position: relative;
  .logo {
    margin: 0 auto;
    margin-bottom: 10vw;
    max-width: 200px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    border-radius: 100%;
    img {
      width: 100%;
    }
  }
}
.menu {
  display: flex;
  flex-direction: column;
  width: 100%;
  grid-area: 1/1/2/2;
  position: relative;
  a {
    font-family: Raleway, serif;
    color: #333;
    cursor: pointer;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    position: relative;
    text-align: center;
    margin: 1vh auto;
    padding: 2.5vh 0;
    width: 80%;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(15px);
    border-radius: 5px;
    box-shadow: 1px 1px 0 0 rgba(255, 255, 255, 0.8) inset,
      3px 5px 10px 0 rgba(0, 0, 0, 0.1);
    text-decoration: none;
    will-change: color, text-shadow, font-size;
    transition: ease all 0.3s;
    &:hover {
      transform: scale(1.1);
      background: rgba(255, 255, 255, 0.8);
    }
  }
}
.wrapper-images {
  display: flex;
  flex-direction: column;
  height: 150vh;
  justify-content: center;
  left: 50%;
  position: absolute;
  top: 50%;
  opacity: 0.6;
  transform: translate3d(-50%, -50%, 0) rotate(22.5deg);
}
.images-line {
  animation: runner 20s linear infinite;
  display: flex;
  transform: translateX(25%);
  .line {
    --tile-margin: 3vw;
    background-position: 50% 50%;
    background-size: cover;
    border-radius: 50%;
    flex: none;
    height: 30vh;
    margin: 3vw;
    width: 30vh;
    position: relative;
    &:after {
      content: "";
      background: inherit;
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      top: 3vh;
      position: absolute;
      background-size: cover;
      z-index: -1;
      filter: blur(25px) opacity(0.8);
    }
    &.large {
      border-radius: 20vh;
      width: 100vh;
    }
  }
}

@keyframes runner {
  to {
    transform: translateX(-25%);
  }
}