:root {
	--scroll: 0;
}

div.div-heart-section {
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

div.div-heart-container {
	display: grid;
	grid-template-columns: repeat(5, 11vw);
	grid-template-rows: repeat(7, 5.5vw);
	grid-column-gap: 1.25vw;
	grid-row-gap: 1.25vw;
	height: 100%;
	width: 60vw;
}

div.div-heart-card {
	border-radius: 1rem;

	animation: enlarge 1s linear infinite;
	animation-play-state: paused;
	animation-iteration-count: 1;
	animation-fill-mode: both;

	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;

	transform: scale(0);
}

.div-heart-card:nth-child(1) {
	grid-area: 2 / 3 / 4 / 4;
	animation-delay: calc(var(--scroll) * -1s - 0.5s);
	background-image: url(../../assets/img/luis.jpg);
}
.div-heart-card:nth-child(2) {
	grid-area: 4 / 3 / 8 / 4;
	animation-delay: calc(var(--scroll) * -1s - 0.5s);
	background-image: url(../../assets/img/d1.jpg);
}
.div-heart-card:nth-child(3) {
	grid-area: 1 / 2 / 3 / 3;
	animation-delay: calc(var(--scroll) * -1s - 0.5s);
	background-image: url(../../assets/img/d2.jpg);
}
.div-heart-card:nth-child(4) {
	grid-area: 3 / 2 / 5 / 3;
	animation-delay: calc(var(--scroll) * -1s - 0.5s);
	background-image: url(../../assets/img/julio.jpg);
}
.div-heart-card:nth-child(5) {
	grid-area: 5 / 2 / 7 / 3;
	animation-delay: calc(var(--scroll) * -1s - 0.5s);
	background-image: url(../../assets/img/d3.jpg);
}
.div-heart-card:nth-child(6) {
	grid-area: 1 / 4 / 5 / 5;
	animation-delay: calc(var(--scroll) * -1s - 0.5s);
	background-image: url(../../assets/img/rene.jpg);
}
.div-heart-card:nth-child(7) {
	grid-area: 5 / 4 / 7 / 5;
	animation-delay: calc(var(--scroll) * -1s - 0.5s);
	background-image: url(../../assets/img/d4.jpg);
}
.div-heart-card:nth-child(8) {
	grid-area: 2 / 1 / 6 / 2;
	animation-delay: calc(var(--scroll) * -1s - 0.5s);
	background-image: url(../../assets/img/d5.jpg);
}
.div-heart-card:nth-child(9) {
	grid-area: 2 / 5 / 4 / 6;
	animation-delay: calc(var(--scroll) * -1s - 0.5s);
	background-image: url(../../assets/img/carlos.jpg);
}
.div-heart-card:nth-child(10) {
	grid-area: 4 / 5 / 6 / 6;
	animation-delay: calc(var(--scroll) * -1s - 0.5s);
	background-image: url(../../assets/img/d6.jpg);
}

@keyframes enlarge {
	to {
		transform: scale(1);
	}
}