/*
	README

	Modify this file as much or as little as needed.

	This file is shared across all CCL widgets in the Callout Tiles family. This enables the ability to
	a family of widgets in a single update without touching the structure of the widget and without needing
	to duplicate efforts across several widget-specific CSS files.
*/

.core-callout-tiles:not([data-width="full"]) {
	max-width: 1210px;
    padding: 0 20px;
    margin: 0 auto 44px;
    color: var(--white);
}

.core-callout-tiles {
	margin-bottom: var(--widget-margin-bottom);
}

.core-callout-tiles:not([data-width="full"]) .slides {
	max-width: none;
	padding: 0;
	margin: 0;
}

.core-callout-tiles .slides {
	gap: 2px;
}

.core-callout-tiles .slide {
	overflow: hidden;
}

.core-callout-tiles .slide .img-cont::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	background-color: rgba(0, 0, 0, 0.4);
	transition: background-color var(--transition);
}

.core-callout-tiles .slide img {
	transform-origin: center;
	transition: transform var(--transition);
}

.core-callout-tiles .slide .content-section {
	align-items: flex-end;
	padding: 16px;
	color: var(--white);
}

.core-callout-tiles .slide .slide-title {
	position: relative;
	transform: none;
	max-width: 190px;
	margin: 0 auto;
	font-family: var(--apotek);
    font-weight: var(--font-weight-extrabold);
    font-size: 21px;
    line-height: calc(22/21);
    letter-spacing: 0.06em;
    text-transform: uppercase;
	text-align: center;
    color: inherit;
	transition: transform var(--transition);
}

.core-callout-tiles .slide .slide-title::after {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translate(-50%, 100%);
	display: block;
	width: 69px;
	height: 13px;
	background: url('/includes/public/assets/shared/arrow-right-long.svg') no-repeat center center / contain;
	content: '';
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--transition);
}

.core-callout-tiles .shared-play-button {
	--color: var(--white);
}

@media (hover: hover) {
	.core-callout-tiles .slide:hover .img-cont::after {
		background-color: rgba(8, 107, 124, 0.7);
	}

	.core-callout-tiles .slide:hover .img-cont img {
		transform: scale(1.1);
	}

	.core-callout-tiles .slide:hover .slide-title {
		transform: translateY(-20px);
	}

	.core-callout-tiles .slide:hover .slide-title::after {
		opacity: 1;
	}
}

@media (min-width: 40em) {
	.core-callout-tiles .slide .slide-title {
		font-size: 16px;
	}
}

@media (min-width: 64em) {
	.core-callout-tiles .slide .slide-title {
		max-width: 220px;
		padding-bottom: 6px;
		font-size: 25px;
	}
}

@media (min-width: 90em) {
	.core-callout-tiles .slide .content-section {
		padding: 24px 24px 18px;
	}
}