✏️ Editing: _gallery-event.scss Writable

.ova-gallery-event{

.wrap-content{
		position: relative;
		overflow: hidden;

.item{
			@include transaction( all, 0.5s, ease);  
			position: relative;
			cursor: pointer;

&:hover{
				@include transaction( all, 0.5s, ease);  
				img{
					@include transaction( all, 0.5s, ease);  
					filter: grayscale(100%);
				}
				.content{
					@include transaction( all, 0.3s, ease);
					opacity: 1;
					bottom: 50px;
					@media (max-width: 767px) {
						bottom: 30px;
					}
				}
			}

img{
				@include transaction( all, 0.5s, ease);
				display: block;
				width: 100%;
				object-fit:cover;
			}

.content{
				@include transaction( all, 0.3s, ease);
				position: absolute;
				width: 100%;
				bottom: 20px;
				left: 40px;
				opacity: 0;
				@media (max-width: 767px) {
					left: 20px;
				}

.wrap-title{
					display: flex;
					align-items:center;
					column-gap: 7px;
					background-color: var(--primary);
					padding: 10px 22px;
					width: max-content; 
					max-width: 85%;

.icon{
						display: inline-flex;
						i{
							font-size: 21px;
							display: inline-flex;
							color: var(--secondary);
						}
						svg{
							width: 21px;
							height: 21px;
						}
					}
					.title{
						margin: 0;
						font-size: 22px;
						font-weight: 600;
					}
				}

.description{
					display: inline-block;
					margin: 0;
					padding: 6px 20px;
					font-size: 18px;
					font-weight: 500;
					line-height: 1;
					background-color: #5748FF;
					color: var(--heading);
				}
			}
		}
	}

&.template1 {
		.wrap-content{
			display: grid;
			grid-template-columns: 0.28fr 0.44fr 0.28fr;
			@media (max-width: 1200px) {
				grid-template-columns: auto;
			}
			.item {
				@media (max-width: 1200px) {
					grid-row-start: unset!important;
  					grid-row-end: unset!important;
				}
				&:first-child {
					grid-row-start: 1;
  					grid-row-end: 3;
				}
				&:nth-child(2) {
					grid-row-start: 1;
  					grid-row-end: 1;
				}
				&:nth-child(3) {
					grid-row-start: 1;
  					grid-row-end: 3;
				}
				img {
					height: 100%;
					@media (max-width: 1200px) {
						height: 420px;
					}
					@media (max-width: 600px) {
						height: 330px;
					}
				}
			}
		}
	}

&.template2{
		.background-text{
			margin: 0;
			font-size: 50px;
			text-transform: uppercase;
			color: var(--primary-background);
			text-shadow: -1px -1px 0 var(--heading), 1px -1px 0 var(--heading), -1px 1px 0 var(--heading), 1px 1px 0 var(--heading);

opacity: 0.3;
			position: absolute;
			top: 50%;
			left: -80px;
			transform: translate(-50% , -50%) rotate(-90deg);
			z-index: 1;
			
			@media(max-width: 1600px){
				font-size: 48px;
				left: -40px;
			}
			@media(max-width: 1320px){
				left: 0;
			}
			@media(max-width: 1024px){
				font-size: 36px;
				left: 20px;
			}
			@media(max-width: 767px){
				display: none;
			}
		}

.wrap-content{
			display: flex;
			@media (max-width: 1024px) {
				flex-direction: column;
			}
			.item{
				width: 100%;
				flex: 1;
				&:hover{
					flex: 2;
				}
				img{
					width: 100%;
					height: 420px;
					filter: none;
					@media (max-width: 600px) {
						height: 330px;
					}
				}
			}
		}
	}
	&.template3{
		.wrap-content{
			display: grid;
			grid-template-columns: repeat(4,1fr);
			@media (max-width: 1200px) {
				grid-template-columns: repeat(3,1fr);
			}
			@media (max-width: 1024px) {
				grid-template-columns: repeat(2,1fr);
			}
			@media (max-width: 767px) {
				grid-template-columns: auto;
			}
			.item {
				img {
					height: 420px;
					@media (max-width: 600px) {
						height: 330px;
					}
				}
			}
		}
	}
}

.rtl {
	.ova-gallery-event {
		.item {
			.content {
				left: unset;
				right: 50px;
				@media (max-width: 767px) {
					right: 20px;
				}
			}
		}
	}
}

🔐 Sid Gifari File Manager Pro