<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%);
	}
}