@media (hover: hover) {
	.imagebox-v2-1-across-fullwidth.animation-expand .slide:hover .slide-img {
		scale: 1.02;
	}
}
.ccl-v2-widget.imagebox-v2-1-across-fullwidth {

	.slide {
		position: relative;

		&:before,
		&:after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			height: 21px;
			width: 100%;
			pointer-events: none;
			background-image: url(/includes/public/assets/shared/grunge.svg);
			background-size: 241px;
			background-repeat: repeat-x;
			background-position: 0 1px;
			z-index: 1;
		}

		&:before {
			bottom: unset;
			top: 0;
			rotate: 180deg;
			z-index: 2;
		}

		.content-section {
			gap: var(--space-2);
			width: calc(100% - 54px);
			left: 28px;
			bottom: var(--space-10);
			padding: var(--space-4);
			border-radius: 5.36px 21.44px;
			background: rgba(14, 46, 67, 0.64);
			box-shadow: 1.34px 2.01px 4.02px 1.34px rgba(0, 0, 0, 0.16);
			max-width: 580px;

			.content-upper {
				gap: var(--space-2);
			}

			.slide-title {
				font-family: var(--font-display);
				font-weight: 600;
				color: var(--white-fe);
				font-size: var(--text-2xl);
				line-height: 1.167;
			}

			.slide-desc {
				font-family: var(--font-roboto-slab);
				font-weight: 400;
				color: var(--white-fe);
				font-size: var(--text-sm);
				line-height: var(--leading-normal);
			}

			.read-more {
				color: var(--white-fe);
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 3px;
				transition: gap var(--transition-appendix);
			}

			& .read-more span::before,
			& .read-more span::after {
				display: none
			}

			& .read-more i {
				font-size: 0.625rem;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-basis: 15px;
				width: 15px;
				min-width: 15px;
				height: 15px;
				min-height: 15px;
				background-color: var(--green-77);
				color: var(--blue-0e);
				border-radius: var(--rounded-circle);
			}
			
			@media (min-width: 40em) {
				& {
					width: 80%;
				}
			}
		}
		.slide-top .credits {
			bottom: var(--space-3);
		}
		.mini-date-section {
			bottom: unset;
			right: unset;
			top: var(--space-8);
			left: var(--space-3);
		}
	}

	@media (hover: hover) {
		.slide-footer .read-more:hover {
			color: var(--white);
			text-decoration: none;
			gap: 7px;
		}

		.slide-footer .read-more:hover i {
			width: 15px;
		}
	}

	@media (min-width: 64em) {
		.slide {
			&:before,
			&:after {
				background-size: 360px;
				height: 31px;
			}

			.content-section {
				left: 131px;
				bottom: var(--space-16);
				padding: var(--space-10);
				border-radius: 8px 32px;

				.slide-title {
					font-size: 2.5rem;
					line-height: 1.1;
				}
				.slide-desc {
					font-size: var(--text-base);
					letter-spacing: 0.01em;
					line-height: var(--leading-relaxed);
				}
				/* .read-more {
					font-size: var(--text-lg);
				} */
			}

			.slide-top .credits {
				bottom: var(--space-8);
			}
		}
	}
}