/* Structure */
.winegb-block-carousel {
	position: relative;
}

.winegb-block-carousel.alignfull:first-child {
	margin-top: calc(var(--spacing-lg) * -1);
}

.winegb-block-carousel + .has-background {
	margin-top: 0;
}

.carousel-slide-wrapper {
	max-width: var(--wrapper-width);
	margin-left: auto;
	margin-right: auto;
}

.carousel-slide {
	padding: var(--spacing-lg) 0;
}


/* Image */
.carousel-slide .slide-media {
	margin: 0;
}


/* Content */
.carousel-slide .slide-content {
	padding: var(--spacing-lg) var(--wrapper-spacing);
}

.carousel-slide .slide-cta {
	margin-top: var(--spacing-lg);
}


/* Columns */
@media (min-width: 768px) {

	.carousel-style-default .carousel-slide-wrapper {
		display: flex;
		align-items: center;
	}

	.carousel-style-default .carousel-slide:nth-child(odd) .carousel-slide-wrapper {
		flex-direction: row-reverse;
	}

	.carousel-style-default .slide-media,
	.carousel-style-default .slide-content {
		flex-basis: 50%;
	}

	.carousel-style-default .slide-content {
		padding: var(--spacing-lg);
	}

}


/* Arrows */
.winegb-block-carousel .slick-arrow {
	font-size: 1.5rem;
	width: 2em;
	height: 2em;
	color: #000;
	padding-left: 2em;
	overflow: hidden;
}

.winegb-block-carousel .slick-prev::before,
.winegb-block-carousel .slick-next::before {
	font-family: 'Font Awesome 6 Pro';
	font-size: 1em;
	opacity: 1;
	color: inherit;
	width: auto;
	height: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.winegb-block-carousel .slick-prev {
	left: 0;
}

.winegb-block-carousel .slick-next {
	right: 0;
}

.winegb-block-carousel .slick-prev::before {
	content: '\f060';
}

.winegb-block-carousel .slick-next::before {
	content: '\f061';
}


/* Dots */
.winegb-block-carousel .slick-dots {
	bottom: 0;
}

.winegb-block-carousel .slick-dotted.slick-slider {
	padding-bottom: 2rem;
	margin: 0;
}

.winegb-block-carousel .slick-dots li {
	width: auto;
	height: auto;
	padding: .25rem;
	margin: 0;
}

.winegb-block-carousel .slick-dots li button {
	font-size: 1rem;
	width: 1.5em;
	height: 1.5em;
	padding: 0;
	position: relative;
}

.winegb-block-carousel .slick-dots li button::before {
	background: #000;
	font-size: 1em;
	opacity: .5;
	content: '';
	width: 1em;
	height: 1em;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	border-radius: 50%;
}

.winegb-block-carousel .slick-dots li.slick-active button::before {
	opacity: 1;
}


/* Hero style */
.winegb-block-carousel:first-child .carousel-style-hero {
	margin-bottom: calc(var(--spacing-lg) * -1);
}

.carousel-style-hero {
	background: var(--brand-primary);
}

.carousel-style-hero .slick-track {
	display: flex;
	min-height: 65vh;
}

.carousel-style-hero .carousel-slide {
	height: inherit;
	display: flex !important;
	align-items: center;
}

.carousel-style-hero .slide-media {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.carousel-style-hero .slide-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: relative;
	z-index: 1;
}

.carousel-style-hero .slide-media::before {
	content: '';
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--brand-primary);
	opacity: .5;
}

.carousel-style-hero .slick-dotted.slick-slider {
	padding-bottom: 0;
}

.carousel-style-hero .slide-content {
	position: relative;
	z-index: 3;
	font-size: 1.125em;
	text-align: center;
	color: #fff;
	max-width: 1024px;
	margin: 0 auto;
	padding: var(--spacing-xl) var(--wrapper-spacing);
}

.carousel-style-hero .slide-content ul {
	display: inline-block;
	text-align: left;
}

.carousel-style-hero.has-dots .slide-content {
	padding-bottom: calc(var(--spacing-xl) + var(--spacing));
}

.carousel-style-hero .slide-cta {
	font-size: 1rem;
}

.carousel-style-hero .slide-heading {
	font-size: 3rem;
	text-transform: uppercase;
	font-weight: 400;
	letter-spacing: .15em;
}

@media (max-width: 600px) {
	.carousel-style-hero .slide-heading {
		font-size: 2rem;
	}
}

.carousel-style-hero .slide-heading span {
	display: block;
}

.carousel-style-hero .slick-dots {
	bottom: 1.5rem;
}

.carousel-style-hero .slick-dots li {
	padding: 0;
}

.carousel-style-hero .slick-dots li button {
	height: 1rem;
	width: 3rem;
}

.carousel-style-hero .slick-dots li button::before {
	background: #fff;
	height:  3px;
	width: 100%;
	border-radius: 0;
}