:root {
	--stretch: 0.2%;
	--gap: 2rem;
	--rotate-increment: -0.5deg;
    /* Define --rotate-frame here with a default value */
    --rotate-frame: 0;
}

.spacer-div {
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3em;
    color: white;
}

.carousel {
	display: block;
	position: relative;
	width: 100vw;
	height: 125vh;
	overflow-y: hidden;
	overflow-x: hidden;
	padding: 0;
	gap: 0;
	scroll-snap-type: none;
	-webkit-overflow-scrolling: touch;
    background-color: #5fadc7;
}

.card {
	scroll-snap-align: none;
	align-items: center;
	justify-content: center;
	text-align: center;
	display: flex;
	font-size: 12rem;
	transform: none;

	&.outer {
		position: absolute;
		width: 22vw;
		aspect-ratio: 2/3.5;
		background: #f8f8f8;
		border: none;
		border-radius: 20px;
		box-shadow: 0 0 1.5rem 1rem rgba(10,45,55,0.2), 0 1.5px 0 0 #b5c3c6;
		/* Use the CSS variable for rotation */
		transform: rotate(calc(var(--rotate-frame) * var(--index) * var(--rotate-increment)));
        /* Add this for smooth transitions */
        transition: transform 0.1s ease-out; /* Adjust duration as needed */
		);

		&:nth-child(1) { top: -3%; left: 15%; background-image: url('../images/cards/txlegend.jpg'); background-size: cover;}
		&:nth-child(2) { top: 20%; left: 70%; background-image: url('../images/cards/salinas.jpg'); background-size: cover;}
		&:nth-child(3) { top: 60%; left: 5%; background-image: url('../images/cards/onpoint.jpg'); background-size: cover;}
		&:nth-child(4) { top: 40%; left: 35%; background-image: url('../images/cards/pfp.jpg'); background-size: cover;}
		&:nth-child(5) { top: 75%; left: 50%; background-image: url('../images/cards/yougrowit.jpg'); background-size: cover;}
		&:nth-child(6) { top: 10%; left: 37%; background-image: url('../images/cards/structural_services.jpg'); background-size: cover;}
		&:nth-child(7) { top: 50%; left: 80%; background-image: url('../images/cards/natchitoches.jpg'); background-size: cover;}
		&:nth-child(8) { top: 85%; left: 20%; background-image: url('../images/cards/robolo.jpg'); background-size: cover;}
		&:nth-child(9) { top: 30%; left: 5%; background-image: url('../images/cards/southland.jpg'); background-size: cover;}
		&:nth-child(10) { top: -3%; left: 57%; background-image: url('../images/cards/cimarron_valley.jpg'); background-size: cover;}

		&:active {
			background: #fff;
			cursor: grabbing;
		}
	}
}

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 812px)
and (orientation: portrait) {

.card {
    &.outer {
        width: 40vw;
    }
}
}