Modal Gallery

Click Here
PHP
<!-- Modal Button -->
<a href="#" class="button" data-modals="modal_banner">Click Here</a>

<!-- modal_banner.php -->
<div class="modal_banner_wrap">
	<span class="icon_close || dialog_close">
        <?= svg('icon_close','') ?>
    </span>
	<div class="img_wrap">
		<div class="img_item">
			<img src="/img/modal_img.png" alt="Smokin' Bones BBQ Hot Prepared Meal Options">
			<h3>Introducing <br> NEW Smokin' Bones BBQ  Hot Prepared Meal Options</h3>
		</div>
	</div>
	<div class="desc_wrap">
		<div class="desc_item">
			<h3>Family BBQ Feasts</h3>
			<p>Specially Prepared to Serve 4</p>
			<a href="#" class="button">Learn More</a>
		</div>
		<div class="desc_item">
			<h3>Individual Team Meals</h3>
			<p>Carefully Packaged Individually For Your Team's Safety</p>
			<a href="#" class="button">Learn More</a>
		</div>
	</div>
</div>
CSS
.modal_banner.dialog{max-width:75rem;padding:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;background-color:#000;border:.4rem solid #f5871f}
.modal_banner.dialog > .icon_close{display:none}

.modal_banner_wrap{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}
.modal_banner_wrap .icon_close{color:#fff;z-index:4}
.modal_banner_wrap .img_wrap,.modal_banner_wrap .desc_wrap{width:50%}
.modal_banner_wrap .img_item{display:block;padding-top:108%;position:relative;overflow:hidden;z-index:2}
.modal_banner_wrap .img_item::after{content:'';position:absolute;bottom:0;left:0;display:block;height:50%;width:100%;background:-moz-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(0,0,0,1) 100%);background:-webkit-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(0,0,0,1) 100%);background:-webkit-gradient(linear,left top,left bottom,from(rgba(255,255,255,0)),to(rgba(0,0,0,1)));background:-o-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(0,0,0,1) 100%);background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(0,0,0,1) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff',endColorstr='#000000',GradientType=0);z-index:1}
.modal_banner_wrap .img_item img{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%);display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
.modal_banner_wrap .img_item h3,.modal_banner_wrap .img_item .h3{font-size:2.7rem;color:#fff;position:absolute;bottom:1rem;left:1rem;width:-webkit-calc(100% - 2rem);width:-moz-calc(100% - 2rem);width:calc(100% - 2rem);z-index:3}
.modal_banner_wrap .desc_wrap{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
.modal_banner_wrap .desc_item{-webkit-box-flex:1;-webkit-flex:1;-moz-box-flex:1;-ms-flex:1;flex:1;text-align:center;padding:3rem 1.5rem;position:relative}
.modal_banner_wrap .desc_item::after{content:'';position:absolute;bottom:0;left:1.5rem;display:block;width:-webkit-calc(100% - 3rem);width:-moz-calc(100% - 3rem);width:calc(100% - 3rem);height:.1rem;border-top:.1rem dotted #f5871f}
.modal_banner_wrap .desc_item:last-child::after{display:none}
.modal_banner_wrap .desc_item h3{font-size:2.4rem;font-weight:400;color:#f5871f;text-transform:uppercase}
.modal_banner_wrap .desc_item p{font-size:1.8rem;max-width:80%;margin:1.4rem auto 2rem;color:#fff}
.modal_banner_wrap .desc_item .button{border-color:#f5871f;background-color:#f5871f;color:#000;-webkit-border-radius:.2rem;-moz-border-radius:.2rem;border-radius:.2rem;text-transform:uppercase}

@media (-ms-high-contrast: none),(-ms-high-contrast: active),(-moz-touch-enabled: 0),(hover: hover) {
	.dialog.modal_banner .icon_close:hover{color:#c76e19}
	.modal_banner_wrap .desc_item .button:hover{border-color:#c76e19;background-color:#c76e19;color:#000}
}

@media only screen and (max-width: 767px) {
	.modal_banner_wrap .desc_item{padding:2.5rem 1.5rem 3rem}
	.modal_banner_wrap .desc_item:first-child{padding-top:0}
	.modal_banner_wrap{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
	.modal_banner_wrap .img_item{padding-top:25rem}
	.modal_banner_wrap .img_wrap,.modal_banner_wrap .desc_wrap{width:100%}
	.modal_banner_wrap .img_item h3,.modal_banner_wrap .img_item .h3{bottom:3rem;left:50%;-webkit-transform:translate(-50%,0);-moz-transform:translate(-50%,0);-ms-transform:translate(-50%,0);-o-transform:translate(-50%,0);transform:translate(-50%,0);max-width:36rem;text-align:center;width:-webkit-calc(100% - 3rem);width:-moz-calc(100% - 3rem);width:calc(100% - 3rem)}
	.modal_banner_wrap .img_item::after{height:85%}
}

@media only screen and (max-width: 450px) {
	.modal_banner_wrap .img_item h3,.modal_banner_wrap .img_item .h3{font-size:2.4rem}
	.modal_banner_wrap .desc_item h3{font-size:2rem}
	.modal_banner_wrap .desc_item p{font-size:1.6rem}
}

@media only screen and (max-width: 400px) {
	.modal_banner_wrap .img_item{padding-top:18rem}
	.modal_banner_wrap .img_item h3,.modal_banner_wrap .img_item .h3{font-size:1.9rem}
	.modal_banner_wrap .desc_item h3{font-size:1.8rem}
	.modal_banner_wrap .desc_item p{font-size:1.4rem;margin:1rem auto 1.5rem}
	.modal_banner_wrap .desc_item{padding:1.5rem 1.5rem 2rem}
	.modal_banner_wrap .desc_item .button{height:3.5rem;line-height:3.6rem;padding:0 1.5rem}
	.modal_banner_wrap .img_item h3,.modal_banner_wrap .img_item .h3{width:-webkit-calc(100% - 6rem);width:-moz-calc(100% - 6rem);width:calc(100% - 6rem)}
}

@media only screen and (max-width: 350px) {
	.modal_banner_wrap .img_item h3,.modal_banner_wrap .img_item .h3{width:-webkit-calc(100% - 2rem);width:-moz-calc(100% - 2rem);width:calc(100% - 2rem)}
}
SCSS
/* Vars */
$cb:              #000000;
$white:           #ffffff;
$orange:          #f5871f;
$orange2:         #c76e19;

.modal_banner.dialog {
	max-width: 75rem;
	padding: 0;
	border-radius: 0;
	background-color: $cb;
	border: .4rem solid $orange;
	
	> .icon_close {
		display: none;
	}
}

.modal_banner_wrap {
	display: flex;
	flex-wrap: wrap;
	
	.icon_close {
		color: $white;
		z-index: 4;
	}
	
	.img_wrap, .desc_wrap {
		width: 50%;
	}
	
	.img_item {
		display: block;
		padding-top: 108%;
		position: relative;
		overflow: hidden;
		z-index: 2;
		
		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			display: block;
			height: 50%;
			width: 100%;
			background: -moz-linear-gradient(top, rgba($white, 0) 0%, rgba($cb, 1) 100%);
			background: -webkit-linear-gradient(top, rgba($white, 0) 0%,rgba($cb, 1) 100%);
			background: linear-gradient(to bottom, rgba($white, 0) 0%,rgba($cb, 1) 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#000000',GradientType=0 );
			z-index: 1;
		}
		
		img {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		
		h3, .h3 {
			font-size: 2.7rem;
			color: $white;
			position: absolute;
			bottom: 1rem;
			left: 1rem;
			width: calc(100% - 2rem);
			z-index: 3;
		}
	}
	
	.desc_wrap {
		display: flex;
		flex-direction: column;
	}
	
	.desc_item {
		flex: 1;
		text-align: center;
		padding: 3rem 1.5rem;
		position: relative;
		
		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 1.5rem;
			display: block;
			width: calc(100% - 3rem);
			height: .1rem;
			border-top: .1rem dotted $orange;
		}
		
		&:last-child {
			&::after {
				display: none;
			}
		}
		
		h3 {
			font-size: 2.4rem;
			font-weight: 400;
			color: $orange;
			text-transform: uppercase;
		}
		
		p {
			font-size: 1.8rem;
			max-width: 80%;
			margin: 1.4rem auto 2rem;
			color: $white;
		}
		
		.button {
			border-color: $orange;
			background-color: $orange;
			color: #000000;
			border-radius: .2rem;
			text-transform: uppercase;
		}
	}
}

@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
	.modal_banner.dialog .icon_close:hover {color: $orange2}
	.modal_banner_wrap .desc_item .button:hover {border-color: $orange2;background-color: $orange2;color: $cb}
}

@media only screen and (max-width: 767px) {
	.modal_banner_wrap .desc_item {padding: 2.5rem 1.5rem 3rem;}
	.modal_banner_wrap .desc_item:first-child {padding-top: 0}
	.modal_banner_wrap {flex-direction: column}
	.modal_banner_wrap .img_item {padding-top: 25rem}
	.modal_banner_wrap .img_wrap, .modal_banner_wrap .desc_wrap {width: 100%}
	.modal_banner_wrap .img_item h3, .modal_banner_wrap .img_item .h3 {bottom: 3rem;left: 50%;transform: translate(-50%, 0);max-width: 36rem;text-align: center;width: calc(100% - 3rem)}
	.modal_banner_wrap .img_item::after {height: 85%}
}

@media only screen and (max-width: 450px) {
	.modal_banner_wrap .img_item h3, .modal_banner_wrap .img_item .h3 {font-size: 2.4rem}
	.modal_banner_wrap .desc_item h3 {font-size: 2rem}
	.modal_banner_wrap .desc_item p {font-size: 1.6rem}
}

@media only screen and (max-width: 400px) {
	.modal_banner_wrap .img_item {padding-top: 18rem;}
	.modal_banner_wrap .img_item h3, .modal_banner_wrap .img_item .h3 {font-size: 1.9rem}
	.modal_banner_wrap .desc_item h3 {font-size: 1.8rem}
	.modal_banner_wrap .desc_item p {font-size: 1.4rem;margin: 1rem auto 1.5rem}
	.modal_banner_wrap .desc_item {padding: 1.5rem 1.5rem 2rem}
	.modal_banner_wrap .desc_item .button {height: 3.5rem;line-height: 3.6rem;padding: 0 1.5rem}
	.modal_banner_wrap .img_item h3, .modal_banner_wrap .img_item .h3 {width: calc(100% - 6rem)}
}

@media only screen and (max-width: 350px) {
	.modal_banner_wrap .img_item h3, .modal_banner_wrap .img_item .h3 {width: calc(100% - 2rem)}
}
JavaScript
if (type == 'modal_banner') {
	$('.dialog').addClass('modal_banner');
}

Please, enter a valid value