/*
	README

	This file should only be used to style structure of the widget. It should not
	contain fonts or theme styling. Use the shared_theme.css for that purpose.

	If simply theming the ASM widget, leave this file alone.

	If your design is very customized, edit this file as needed. 
*/

.asm-callout-tiles {
	position: relative;
	margin-block: var(--asm-widget-margin-mobile);
	margin-inline: auto;
	padding-block: 0;
	padding-inline: var(--asm-width-page-padding);
	max-width: calc(2 * var(--asm-width-page-padding, 24px) + var(--asm-width-base));
}

@media (min-width: 64em) {
	.asm-callout-tiles {
		padding-block: var(--asm-widget-margin-mobile);
		margin-block: var(--asm-widget-margin-desktop);
	}
}

.asm-callout-tiles .slides {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-3);
}

@media (min-width: 40em) {
	.asm-callout-tiles .slides {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 64em) {
	.asm-callout-tiles .slides {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--space-5);
	}
}

.asm-callout-tiles .slide {
	position: relative;
}

.asm-callout-tiles .slide .content-section {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--space-5);
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.asm-callout-tiles .slide .img-cont::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));	
}

.asm-callout-tiles .slide img {
	transform-origin: center;
	transition: transform 400ms ease;
}

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

.asm-callout-tiles .slide .img-cont {
	position: relative;
	overflow: hidden;
	border-radius: var(--rounded-2xl);
}

.asm-callout-tiles .slide .img-cont:focus-within {
	outline: 3px solid var(--asm-sw-black);
	outline-offset: 1px;
}