@use "mixins/mixins-master" as *;
@use "mixins/flex" as *;
@use "variables" as *;
.thim-sc-photo-wall {
	.grid {
		margin: -15px -15px 0;
		.grid-item {
			float: left;
			list-style: none;
			padding: 15px;

			.inner-item {
				position: relative;
				// margin: 5px;
				display: grid;
				border-radius: $thim_border_radius;
				overflow: hidden;
				.thumbnail {
					display: grid;
					img {
						border-radius: $thim_border_radius;
						overflow: hidden;
					}
				}
				.item-info {
					position: absolute;
					color: #fff;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					opacity: 0;
					@include transition(all 0.5s);
					z-index: 3;
					@include flexbox();
					align-items: center;
					flex-direction: column;
					justify-content: center;
					text-transform: capitalize;
					border-radius: $thim_border_radius;
					overflow: hidden;
					.title {
						font-weight: 500;
						font-size: 20px;
						margin-bottom: 8px;
						color: #fff;
					}
					.description {
						font-size: 14px;
						font-weight: 400;
						// letter-spacing: 0.1px;
						// font-style: italic;
					}
				}
				&:hover {
					&:after {
						@include opacity(0.9);
					}
					.item-info {
						@include opacity(1);
					}
				}
				&:after {
					position: absolute;
					left: 0;
					right: 0;
					top: 0;
					bottom: 0;
					@include opacity(0);
					@include transition(all 0.5s);
					content: "";
					z-index: 1;
				}
			}
		}
		&.image-crop {
			// .grid-item {
			// 	&:nth-child(1) {
			// 		padding-top: 13px;
			// 	}
			// 	&:nth-child(2) {
			// 		padding-top: 69px;
			// 	}
			// 	&:nth-child(4) {
			// 		padding-top: 109px;
			// 	}
			// 	&:nth-child(5) {
			// 		padding-top: 49px;
			// 	}
			// }
		}
	}
	.loadmore {
		display: none;
		width: 100%;
		margin-top: 40px;
		margin-bottom: 30px;
		text-align: center;
		a {
			color: #202121;
			font-size: 16px;
			letter-spacing: 0.3px;
			height: 50px;
			line-height: 50px;
			padding: 0 45px;
			-webkit-border-radius: 50px;
			-moz-border-radius: 50px;
			border-radius: 50px;
			text-transform: uppercase;
			font-weight: 400;
			cursor: pointer;
			display: inline-block;
			text-decoration: underline;
		}
	}
}

@media (min-width: 1600px) {
	.thim-sc-photo-wall {
		.grid.image-crop {
			.grid-item {
				&:nth-child(15) {
					left: auto !important;
					right: 10px;
					margin-top: -9px;
				}
			}
		}
	}
}
@media (max-width: 480px) {
	.thim-sc-photo-wall {
		.loadmore {
			display: inline-block;
			margin-bottom: 0;
		}
	}
}