/*
	README

	Modify this file as much or as little as needed.

	This file is shared across all CCL widgets in the Slider 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-v2-hero-image {
	--sw-collections-minor-text-color-light: var(--black);
	--sw-collections-text-color-light: var(--black);
   	background-image: url(../svg/energy_pinkwave.svg);
	background-position: left top, right -10% bottom 10px;
	background-repeat: no-repeat, no-repeat;
	background-color: unset;
	background-size: 120px;
    padding-top: 30px;
	padding-bottom: 18px;

	&::after {
		content: '';
        position: absolute;
        right: -160px;
        bottom: -79px;
        background-image: url(../svg/energy_yellowavebluedot.svg);
        background-repeat: no-repeat, no-repeat;
        background-color: unset;
        z-index: -1;
        width: 292px;
        height: 186px;
        background-size: contain;
	}
}

@media (min-width: 40em) {
    .core-v2-hero-image {
        background-position: left top, right -225px  bottom -80px;
        background-repeat: no-repeat, no-repeat;
        background-color: unset;
        background-size: auto;
        padding-top: 60px;
        padding-bottom: 30px;

		&::after {
			right: 0;
			bottom: -163px;
			height: 393px;
			width: 463px;
			background-size: contain;
		}
    }
}


.core-v2-hero-image .overlap-image .slide-title {
    margin-bottom: 0;
}

.core-v2-hero-image .overlap-image .slide-title > a:hover .info-flag{
	color: var(--sw-collections-text-color-light);
}