/*
	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.
*/

.ccl-widget.core-callout-tiles {
    padding-top: 0;
    margin-top: 0;
    margin-bottom: 40px;
}

.ccl-widget.core-callout-tiles .slides .slide .content-section { align-items: flex-end; }

.ccl-widget.core-callout-tiles .slides .slide .slide-title,
.ccl-widget.core-callout-tiles .slides .slide .slide-title a {
    display: inline;
    font-family: var(--font-heading);
	font-weight: 900;
	letter-spacing: 0.06em;
	color: var(--white);
    text-decoration: none;
    text-transform: uppercase;
    margin-bottom: 0;
}

.ccl-widget.core-callout-tiles .slides .slide .slide-title span {
    background-color: var(--dark-blue);
    margin-left: 2px;
    -webkit-box-decoration-break: clone;
    -ms-box-decoration-break: clone;
    -o-box-decoration-break: clone;
    box-decoration-break: clone;
}

@media (hover:hover) {
    .ccl-widget.core-callout-tiles .slides .slide:hover .img-cont img { transform: none; }
}

@media (min-width: 40em) {
    .ccl-widget.core-callout-tiles.core-styles.js-loaded .slides .slide .slide-title,
    .ccl-widget.core-callout-tiles.core-styles.js-loaded .slides .slide .slide-title a {
        font-size: 18px;
        line-height: 24px;
    }
}

@media (min-width: 64em) {
	.ccl-widget.core-callout-tiles { margin-bottom: 80px; }

	.ccl-widget.core-callout-tiles .slides { gap: 4px; }

	.ccl-widget.core-callout-tiles .slides .slide .img-cont img {
        transform: scale(1);
        transition: all ease 0.8s;
    }

	.ccl-widget.core-callout-tiles .slides .slide .slide-title span { transition: all ease 0.8s; }

	@media (hover:hover) {
		.ccl-widget.core-callout-tiles .slides .slide:hover .img-cont img {
            transform: scale(1.2);
            transition: all ease 0.8s;
        }

		.ccl-widget.core-callout-tiles .slides .slide:hover .slide-title span {
            background-color: var(--dark-pink);
            transition: all ease 0.8s;
        }
	}
}