@import '../functions.less';
@import '../../../../files/config/colors.less';


.drs-gallery-01 {
	.grid(1fr; 10px);
	padding: 70px 0 80px 0;
	max-width: 1000px;
	margin: 0 auto;
	.title:not(:empty) {
		text-align: center;
		font-size: 1.5rem;
		font-weight: bold;
		margin-bottom: 20px;
	}
	.figure {
		.grid(1fr; 0; stretch);
		* { 
			padding: 0; 
			margin: 0 auto; 
		}
		.container {
			padding: 0 5px;
		}
		figure {
			position: relative;
			height: 100%;
			img {
				display: block;
				width: 100%;
				height: 100%;
				filter: brightness(90%);
				object-fit: cover;
				padding: 0; margin: 0;
			}
			figcaption {
				.grid(1fr auto; 20px);
				position: absolute;
				color: #FFF;
				bottom: 0px;
				width: 100%;
				padding: 10% 20px 20px 20px;
				font-size: 1.3rem;
				background: linear-gradient(#0000, #000B);
				label {
					width: 100%;
				}
				span {
					opacity: 70%;
					font-weight: 100;
					font-size: 1.15em;
				}
			}
			x {
				display: none;
			}
		}
	}
	.thumbs {
		padding: 0 5px;
		&.w100, &.w200, &.w300, &.w400 {
			width: 100%;
			max-width: none;
			.container {
				overflow-x: scroll;
				padding: 0;
			}
		}
		&.w200 {
			display: none;
		}
		&.w200 .flex { width: 200%; }
		&.w300 .flex { width: 300%; }
		&.w200.mobile .flex { width: 400%; }
		&.w300.mobile .flex { width: 600%; }
		&.w400.mobile .flex { width: 800%; }
		.container {
			overflow: hidden;
			scrollbar-width: none;
		}
		.flex {
			display: flex;
			gap: 3px;
			img {
				width: 100%;
				max-width: 200px;
				filter: grayscale(100%);
				border-radius: 5px;
				cursor: pointer;
				opacity: 50%;
				&.active {
					filter: grayscale(0%);
					opacity: 100%;
				}
				&:hover {
					filter: grayscale(60%);
					opacity: 100%;
				}
			}
		}
	}
	+ .loading {
		display: block;
		position: absolute;
		left: calc(50% - 70px);
		margin-top: -180px;
	}
}

@media screen and ( max-width: 900px ){
	.drs-gallery-01 {
		.figure {
			figure {
				figcaption {
					display: block;
					font-size: .95rem;
					padding: 60px 15px 10px 15px;
					span {
						display: none;
					}
				}
				x {
					display: block;
					position: absolute;
					width: 100px;
					font-size: 1.2rem;
					color: #FFF;
					text-align: center;
					padding: 10px 10px 40px 40px;
					top: 0;
					right: 0;
					background: linear-gradient(to bottom left, #0004, transparent 65%);
				}
			}
		}
	}
}