/*
	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 {
	margin-bottom: var(--widget-margin-bottom);
	padding-top: var(--widget-padding-top);
}

.ccl-widget.core-callout-tiles .slides {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}

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

@media (hover: hover) {
	.core-callout-tiles .slide:hover .img-cont img {
		transform: scale(1.2);
	}
}
.ccl-widget.core-callout-tiles .slide .content-section {
    width: fit-content;
    height: fit-content;
    padding: 6px 10px 4px;
    background-color: var(--black);
    bottom: 12px;
}

.core-callout-tiles .slide .slide-title {
	font-size: 18px;
    font-family: var(--alternate);
    font-weight: var(--font-weight-normal);
    color: var(--white);
    text-transform: uppercase;
    line-height: 1.1;
    position: relative;
    top: .5px;
}

@media (min-width: 64em) {
    .ccl-widget.core-callout-tiles .slides {
        gap: 30px;
        max-width: 1140px;
    }

    .ccl-widget.core-callout-tiles .slide .content-section {
        bottom: 30px;
    }

    .ccl-widget.core-callout-tiles .slide .slide-title {
        font-weight: var(--font-weight-demi);
    }
}