/* Make the film strip tight in 7 columns and 3 rows */

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.gallery {
	width: 100%;
	max-width: 100vw;
	margin: 0 auto;
	background-color: black;
	line-height: 0;
	font-size: 0;
	display: block;
}

.sprocket-row {
  width: 100%;

  /* 1. Height scales with the screen width (adjust 4vw to make it thicker/thinner) */
 
  height: 1.5vw; 
  background-color: #666;
  
  /* 2. The SVG: Using 'viewBox' allows it to scale perfectly */

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='20' y='20' width='40' height='55' rx='10' ry='15' fill='%23ffffff'/%3E%3C/svg%3E");
  
  /* 3. The KEY FIX: Set the width of each 'hole unit'. 
        By making the width '4vw' (same as height), the holes will be perfect squares. 
        The '100%' ensures the height of the hole matches the container. */
  background-size: 1.5vw 100%;
  
  background-repeat: repeat-x;
}


.film-strip-row {
	display: flex;
	flex-wrap: nowrap;
	/* Prevents wrapping to a second line */
	width: 100%;
	gap: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none;
}

/* Force exactly 7 items per row */

.film-strip-row .desc-photo-wrap {
	flex: 0 0 14.285%;
	/* 100 / 7 = 14.285% */
	width: 14.285%;
	max-width: 14.285%;
	display: block;
	margin: 0;
	padding: 0;
}

/* Ensure images fill their 14.285% containers entirely */

.desc-photo-wrap img {
	width: 100%;
	height: auto;
	/* Keeps sprockets from stretching vertically */
	display: block;
	margin: 0;
	padding: 0;
	vertical-align: bottom;
}

/* Specific fix for the photo row to match height if needed */
.film-strip-row .desc-photo-wrap img {
	height: 100%;
	object-fit: cover;
}

 .film {
        /* 50px (Main Footer) + 40px (Footer22) + 20px (Gap) = 110px */
        margin-top: 10px !important; 
        margin-bottom: 5px !important; 
        display: block; 
    }


/* =========================================
   Smartphone View (e.g., screens smaller than 768px)
   ========================================= */
@media screen and (max-width: 768px) {
    .film {
        /* 50px (Main Footer) + 40px (Footer22) + 20px (Gap) = 110px */
        margin-top: 12px !important; 
        margin-bottom: 50px !important; 
    }
}