.flip-card {
	background-color: transparent;
	width: 200px;
	height: 320px;
	perspective: 1000px;
	/* margin: 100px auto; */

	view-timeline-name: --cardFlip;
	view-timeline-axis: block;

	cursor: pointer;
	z-index: 1;
	align-self: center;
}

.flip-card img {
	width: inherit;
	height: inherit;
	border-radius: 10px;
}

.flip-card-inner {
	position: relative;
	width: inherit;
	height: inherit;
	text-align: center;
	transform-style: preserve-3d;
	/* transform: scale(1) rotateY(0deg); */

	transition: transform 0.4s ease;

	/* animation-name: flip;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-fill-mode: both;
	/* animation-timeline: scroll();
	animation-range: 30% 50%; */
}

.flip-card:hover .flip-card-inner {
	transform: rotateY(180deg);
}

/* .flip-card:not(:hover) .flip-card-inner {
	animation: flipGrowBack 0.8s ease-in-out forwards;
} */

@keyframes flipGrowForward {
	0% {
		transform: scale(1) rotateY(0deg);
	}

	50% {
		transform: scale(1.1) rotateY(180deg);
	}
	100% {
		transform: scale(1) rotateY(180deg);
	}
}

@keyframes flipGrowBack {
	0% {
		transform: scale(1) rotateY(180deg);
	}

	50% {
		transform: scale(1.1) rotateY(0deg);
	}

	100% {
		transform: scale(1) rotateY(0deg);
	}
}

@keyframes flip {
	from {
		transform: rotateY(0deg);
	}

	to {
		transform: rotateY(180deg);
	}
}

/* Position the front and back side */
.flip-card-front,
.flip-card-back {
	position: absolute;
	width: 100%;
	height: 100%;

	-webkit-backface-visibility: hidden; /* Safari */
	backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
	background-color: #bbb;
	color: black;
	border-radius: 10px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

/* Style the back side */
.flip-card-back {
	background-color: dodgerblue;
	color: white;
	transform: rotateY(180deg);
	border-radius: 10px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

@media (max-width: 980px) {
	.section-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}