.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: $grid__gap;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

// Loops to enumerate the classes for gallery columns.
@for $i from 2 through 9 {

	.gallery-columns-#{$i} {
		grid-template-columns: repeat($i, 1fr);
	}
}

.gallery-caption {
	display: block;
}

// carousel
//.xarxaprod-associat-gallery-images {  //section
//  .xarxaprod-associat-slides-nav{ //navigation
//	}
//	.xarxaprod-associat-slides { //the slides
//		> .xarxaprod-associat-image { //each slide
//			img {
//			}
//			p{
//			}
//		}
//	}
//}

// carousel v01
// https://css-tricks.com/how-to-make-a-css-only-carousel/
.xarxaprod-associat-gallery-images {  //section
	--this-aspect-ratio: 16 / 9;
	display: grid;
	//grid-template-rows: 6fr 1fr; //no need to impose height, it will auto adapt
	grid-gap: $grid__gap;
	overflow: hidden;
  .xarxaprod-associat-slides-nav{ //navigation
		display: flex;
		//height: 4rem;
		grid-row-start: 2;
		overflow-x: scroll;
		overflow-y: hidden;
		&::-webkit-scrollbar {
      display: none;
    }
		a {
	    aspect-ratio: var(--this-aspect-ratio);
			margin-right: 0.5rem;
		}
		img {
	    aspect-ratio: var(--this-aspect-ratio);
			object-fit: cover;
			height: 100%;
			width: auto;
		}
	}
	.xarxaprod-associat-slides { //the slides
		overflow-x: scroll;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		&::-webkit-scrollbar {
      display: none;
    }
		display: flex;
	  aspect-ratio: var(--this-aspect-ratio);
		.xarxaprod-associat-image { //each slide
			position: relative;
			margin: 0;
			min-width: 100%;
			img {
				display: block;
				max-width: 100%;
				width: 100%;
				min-height: 100%;
				scroll-snap-align: start;
				object-fit: cover;
			}
			p{
				position: absolute;
				bottom: 1rem;
				left: 1rem;
				backdrop-filter: blur(5px);
				padding: 0.5rem;
				
			}
		}
	}
}