/*
	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 CCL, leave this file alone.

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

.core-v2-side-by-side .slides {
	padding: 0;
    gap: 56px var(--space-4);
}


.core-v2-side-by-side.side-by-side-v2-2-across .slides {
    background: var(--gray);
    max-width: 100%;
	padding: 35px;
	gap: var(--space-6);
}

.core-v2-side-by-side.side-by-side-v2-2-across .slides .slide {
	display: flex;
}

.core-v2-side-by-side.side-by-side-v2-2-across .slides .slide > .inner {
    background: var(--sw-key-color);
	flex-grow:1;
}

.core-v2-side-by-side.side-by-side-v2-2-across.core-v2-side-by-side.theme-secondary .slides .slide > .inner {
    background: var(--sw-key-color);
}

.core-v2-side-by-side .slides .slide > .inner {
    padding: 0;
	grid-template-columns: 1fr;
}

.core-v2-side-by-side.theme-secondary .slides .slide > .inner {
    background: var(--sw-secondary-color);
}

.core-v2-side-by-side .slide > .inner {
	gap:0;
}

.core-v2-side-by-side .slide-top {
	margin-bottom: 0;
}

.core-v2-side-by-side .content-section {
	color: var(--text-color);
	padding: 30px;
	display: grid;
    place-items: center;
	height: 100%;
    max-width: none;
    justify-items: start;
}

.core-v2-side-by-side.full-width .slide .inner {
    padding: 0;
    max-width: 100%;
}

.core-v2-side-by-side .slides .slide .content-section  {
	gap: var(--space-5);
}

.core-v2-side-by-side .slide .slide-footer .read-more{
    color: var(--white);
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: var(--space-3) var(--space-5);
    clip-path: polygon(100% 92.66%, 4.10% 100%, 0% 0%, 96.99% 4.59%, 100% 92.66%);
}

.core-v2-side-by-side .slide .slide-footer button {
	margin: 0 auto;
}

.core-v2-side-by-side.slide-right .slide-top,
.core-v2-side-by-side.slide-left.alternating .slide:nth-child(even) .slide-top,
.core-v2-side-by-side.slide-right.alternating .slide:nth-child(even) .content-section {
	order: 0;
}

@media (min-width: 64em) {
    .core-v2-side-by-side .slides {
        padding: 0;
        gap: 70px var(--space-4);
    }

	.core-v2-side-by-side .slides .slide > .inner {
		display: grid;
        grid-template-columns: 1fr;
		background: none;
        align-items: center;
    }

	.core-v2-side-by-side.side-by-side-v2-2-across .slides .slide > .inner {
        padding: 0;
    }

	.core-v2-side-by-side.side-by-side-v2-2-across .slides .slide .content-section {
		max-width: var(--width-comfortable);
		padding:30px;
	}

	.core-v2-side-by-side.core-v2-side-by-side.theme-secondary .slides .slide > .inner {
		background: none;
    }

	.core-v2-side-by-side:not(.side-by-side-v2-2-across) .slide.content-left > .inner {
        grid-template-columns: 1fr 1fr;
    }

	.core-v2-side-by-side:not(.side-by-side-v2-2-across) .slide.content-right > .inner {
        grid-template-columns: 1fr 1fr;
    }

	.core-v2-side-by-side.full-width:not(.side-by-side-v2-2-across) .slide.content-left > .inner {
        grid-template-columns: 1fr 2fr;
    }

	.core-v2-side-by-side.full-width:not(.side-by-side-v2-2-across) .slide.content-right > .inner {
        grid-template-columns: 2fr 1fr;
    }

	.core-v2-side-by-side .slides .slide .content-section  {
        margin: auto;
        padding: 0 20px;
    }

	.core-v2-side-by-side .slide > .inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

	.core-v2-side-by-side.slide-right .slide-top,
	.core-v2-side-by-side.slide-left.alternating .slide:nth-child(even) .slide-top,
	.core-v2-side-by-side.slide-right.alternating .slide:nth-child(even) .content-section {
		order: 1;
	}

    .core-v2-side-by-side .slide .slide-footer .read-more{
        padding: var(--space-5);
    }
}


@container (min-width: 40em) {
    .core-v2-side-by-side.full-width .content-section {
        padding: 30px;
    }
}