div#video-modal {
	background-color: rgba(0, 0, 0, 0.75);
	/* same as your example */
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 100;
	overflow: auto;
	align-items: center;
	justify-content: center;
	z-index: 999;
}

.modal-content {
	position: relative;
	padding-bottom: 30%;
	height: 0;
	overflow: hidden;
	width: 80%;
	max-width: 55%;
}

.modal-content iframe,
.modal-content object {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.videomodal-container .modal-box-content {
	width: 60% !important;
}

@media (min-width: 1200px) {
	.image_link_video_carousel {
		display: flex;
		gap: 60px;
	}

	.video-carousel {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20px;
	}
}

@media (max-width: 1199px) {
	.image_with_link {
		display: none;
	}
}

@media screen and (max-width: 767px) {
	.videomodal-container .modal-box-content {
		width: 90% !important;
	}

	.modal-content {
		padding-bottom: 45%;
		max-width: 80%;
	}
}