.title-wrapper {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: 1fr;
	align-items: end;
}

.title-wrapper img:nth-child(1) {
	grid-area: 1 / 1 / 2 / 2;
}
.title-wrapper img:nth-child(2) {
	grid-area: 1 / 2 / 2 / 5;
	align-self: center;
	justify-self: center;
}
.title-wrapper img:nth-child(3) {
	grid-area: 1 / 5 / 2 / 6;
}

@media screen and (max-aspect-ratio: 1/1) {

	.title-wrapper {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(2, 1fr);
	}

	.title-wrapper img:nth-child(1) {
		grid-area: 2 / 1 / 3 / 2;
        align-self: start;
		width: 80%;
	}
	.title-wrapper img:nth-child(2) {
		grid-area: 1 / 1 / 2 / 3;
	}
	.title-wrapper img:nth-child(3) {
		grid-area: 2 / 2 / 3 / 3;
		justify-self: end;
        align-self: start;
		width: 80%;
	}
}

.background { position: fixed; height: 100vh; width: 100%; z-index: -1; overflow: hidden; }
.background-abs { position: absolute; }
.background-foot { bottom: 0; }

.ani-k,
.ani-z { 
	position: absolute;
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-timing-function: ease-in-out;
	animation-fill-mode: forwards; 
	width: 3vw;
	height: auto;
}

.ani-k { 
	animation-name: ani-k; 
}

.ani-z { 
	animation-name: ani-z; 
}

@keyframes ani-z {
	0% { transform: scale(0) rotate(0deg); }
	50% { transform: scale(1) rotate(180deg); }
	100% { transform: scale(0) rotate(360deg); }
}

@keyframes ani-k {
	0% { opacity: 0; transform: translateY(-10vh); }
	20% { opacity: 1; transform: translateY(0vh); }
	100% { opacity: 1; transform: translateY(100vh); }
}


.oblak {
	width: 12vw;
	height: auto;
	position: absolute;
	animation-name: oblak;
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-direction: normal;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}

.oblak-inv {
	animation-direction: reverse;
}

@keyframes oblak {
	from { left: 101vw; }
	to { left: -16vw; }
}

@media screen and (max-width: 768px) {

	.oblak {
		width: 30vw;
	}

	.ani-z,
	.ani-k {
		width: 8vw;
		height: 8vw;
	}
}

.merch-img-wrapper {
	-webkit-mask-image: url('/assets/images/merch/mask.svg');
	mask-image: url('/assets/images/merch/mask.svg');
	mask-repeat: no-repeat;
	position: relative;
}

.merch-img-wrapper:after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: url('/assets/images/merch/border.svg');
	background-size: 100%;
	top: 0;
	left: 0;
}