
.wp-block-hero-banner {
	padding: 0;
	overflow: hidden;
	h1 {
		color: white;
	}

	@media (min-width: 992px) {
		height: 700px;
		display: flex;
	}
}

.wp-block-hero-banner__image,
.wp-block-hero-banner__slider {
	height: 501px;
	width: 100%;
	max-width: none!important;
	img {
		height: 100%;
		width: 100%;
		object-fit: cover;
		object-position: center;
		animation-name: fadeShow!important;
	}

	@media (min-width: 992px) {
		width: 55%!important;
		min-height: 701px;
	}
}

.wp-block-hero-banner__slider {
    display: flex;
    .slick-track {
    	height: 100%;
    }

    ul.slick-dots {
    	gap: 2px;
    	bottom: calc(var(--col-gap) * -1.5);
    	li button {
    		opacity: 0.5;
    		border-top: 2px solid white;
    		color: white;
    		width: 100px;
    		font-size: 12px;
    		border-radius: 0;
    		background-color: transparent;
    		height: auto;
    		text-align: left;
    	}

    	li.slick-active button {
    		opacity: 1;
    		background-color: transparent;
    	}

    	@media (min-width: 992px) {
    		bottom: calc(var(--col-gap) * 1.5);
    		left: calc(100% + var(--col-gap) * 2);
    	}

    	@media (min-width: 1500px) {
    		bottom: calc(var(--col-gap) * 3.5);
    		left: calc(100% + var(--col-gap) * 4);
    	}
    }
}

.wp-block-hero-banner__slide {
	width: 100%;
	height: 100%;
}

.wp-block-hero-banner__text {
	padding: calc(var(--col-gap) * 4) calc(var(--col-gap));

	@media (min-width: 992px) {
		width: 45%!important;
	    display: flex;
	    flex-direction: column;
	    justify-content: flex-end;
		padding: calc(var(--col-gap) * 2) calc(var(--col-gap) * 2);
		padding-right: max(48px, calc((100vw - 1440px) / 2)) !important;
		
		.wp-block-hero-banner.is-slider & {
			padding-bottom: calc(var(--col-gap) * 4);
		}
	}

	@media (min-width: 1500px) {
		padding: calc(var(--col-gap) * 4);

		.wp-block-hero-banner.is-slider & {
			padding-bottom: calc(var(--col-gap) * 6);
		}
	}
}

.wp-block-hero-banner__excerpt {
	color: white;
}


@keyframes fadeShow {
	0% {
		opacity: 0;
	}
  	100% {
  		opacity: 1;
  	}
}