.wrap
	.lines
	.lines
	.lines
	.lines
	.lines
	.lines
	.lines
	.lines
	.lines
	.lines
	.lines
	.lines
	

@mixin object($width, $height, $bg) {
	width: $width;
	height: $height;
	background: $bg;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

$gradient : linear-gradient(to top, rgba(248,80,50,1) 0%, rgba(219,27,168,1) 82%, rgba(219,27,168,1) 100%);

body {
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

.wrap {
	@include object(120px,35px,null);
	display:grid;
	grid-template-columns:repeat(12,1fr);
	grid-column-gap:2px;
	transform:rotateY(180deg) rotateZ(180deg);
	.lines {
		background: $gradient;
		@for $i from 1 through 12 {
			&:nth-child(#{$i}) {
				animation:lines 1s 0.1s*($i - 24) ease-in-out infinite alternate;
			}
			@keyframes lines {
				0%{
					height:0;
				}
				100%{
					height:35px;
				}
			}
		}
	}
}