.slideshow { 
	max-width: 80%; 
	margin: auto;
	overflow: hidden; 
	position: relative;
}

.slide-track { 
	display: flex; /*To position images next to each other */
	gap: var(--g);
	/* Total width: (Width + Gap) * (Unique Images * 2) */
    width: calc((var(--w) + var(--g)) * var(--n) * 2);
	animation: scroll 60s linear infinite;
	
}

.card { 
  margin-top: 2em;
  margin-bottom: 2em;
  width: var(--w); 		/* Width of the image */
  height: var(--w);  	/* Height of the image*/
  flex-shrink: 0;		/* Looping pictures must not shrink to stay on screen */
  border-radius: 1em;	/* Image border */
  position: relative; 	/* Needed for absolute caption positioning */
  overflow: hidden;   	/* Needed to hide the caption before it slides up */
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  cursor: pointer;
}

.card img { /* The image items completely fill the card item */
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { 
      /* Move by exactly one full set (Width + Gap) * n */
      transform: translateX(calc(-1 * (var(--w) + var(--g)) * var(--n))); 
    }
}
  
.slide-track:has(.card:hover) {
  animation-play-state: paused; /* Pauses the animation associated with the slide track when hovering over card */
}
  
.card:hover {
	transform: scale(1.2); /* Increases size of card */
	box-shadow: 
    0 0 0 4px rgba(255, 255, 255, 1), /* White "buffer" to separate image from glow */
    0 10px 30px rgba(0, 0, 0, 0.3),   /* Soft drop shadow for depth */
    0 0 20px rgba(59, 130, 246, 0.5); /* The primary color glow */
	z-index: 10;
  }
  
.caption {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 90%;
	padding: 1em;
	background: linear-gradient(transparent, rgba(0,0,0,0.3));
	color: white;
	font-family: 'Quicksand', sans-serif;
	font-size: 0.9em;
	text-align: center;
	/* Start hidden below the card */
	transform: translateY(100%);
	transition: transform 0.8s ease;
	font-style: bold;
}

.card:hover .caption {
  /* Slide up into view */
  transform: translateY(0);
}

@media only screen and (max-width: 48.75rem) {
    #slideshow {
        --w: 16em; /* Shrinks the photos */
        --g: 0.5em; /* Shrinks the gap */
    }
	
	.slide-track {
		padding-bottom: 1rem;
	}
}