.ccl-widget.core-callout-tiles.callout-tiles-marquee {
    /* max-width: 1200px;
    margin: 0 auto; */
}

.ccl-widget.core-callout-tiles.callout-tiles-marquee .slides {
    grid-template-columns: 1fr;
    gap: var(--space-2);
    max-width: 1200px;
}
.ccl-widget.core-callout-tiles.callout-tiles-marquee .slide .content-section{
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: var(--space-6) var(--space-5);
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.ccl-widget.core-callout-tiles.callout-tiles-marquee .slide .slide-title {
    font-family: var(--font-title);
    font-size: 25px;
    font-weight: 700;
    color: var(--text-color);
    text-align: left;
    line-height: 1;
    text-transform: uppercase;
    text-shadow: 0px 10px 15px rgb(0, 0, 0, 0.4);
    z-index: 1;
}
.core-callout-tiles.callout-tiles-marquee .slide .img-cont::before,
.core-callout-tiles.callout-tiles-marquee .slide .img-cont-promoted::before {
    content: "";
    position: absolute;
    top: -75%;
    right: initial;
    left: -17%;
    width: 125%;
    height: 125%;
    transform: rotate(159deg);
    background:linear-gradient(to left, rgb(126, 44, 123, 0.9), rgb(126, 44, 123, 0));
    opacity: 0;
    transition: opacity 200ms ease-out;
    pointer-events: none;
}
.core-callout-tiles.callout-tiles-marquee .slide:hover .img-cont::before,
.core-callout-tiles.callout-tiles-marquee .slide:hover .img-cont-promoted::before {
    content: "";
    opacity: 1;
    transition: opacity 200ms ease-in;
    z-index: 1;
}
.core-callout-tiles.callout-tiles-marquee .slide .img-cont-promoted::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
    pointer-events: none;
}
.core-callout-tiles.callout-tiles-marquee .slide .img-cont::after,
.core-callout-tiles.callout-tiles-marquee .slide .img-cont-promoted::after {
    background: radial-gradient(closest-side at 100px 100px, #000 -50%, transparent 150%);
}
.core-callout-tiles.callout-tiles-marquee .slide .img-cont-promoted {
    overflow: hidden;
    position: relative;
}

@media screen and (min-width:40em) {
    .ccl-widget.core-callout-tiles.callout-tiles-marquee .slides {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2);
    }
    .core-callout-tiles.callout-tiles-marquee .slide .img-cont::before {
        content: "";
        position: absolute;
        top: -72%;
        right: initial;
        left: -23%;
        width: 125%;
        height: 125%;
        transform: rotate(153.5deg);
        background: linear-gradient(to left, rgb(126, 44, 123, 0.9), rgb(126, 44, 123, 0));
        opacity: 0;
        transition: opacity 200ms ease-out;
}

    .core-callout-tiles.callout-tiles-marquee .slide .img-cont-promoted::before {
        content: "";
        position: absolute;
        top: -89%;
        right: initial;
        left: -27%;
        width: 168%;
        height: 125%;
        transform: rotate(153.5deg);
        background: linear-gradient(to left, rgb(126, 44, 123, 0.9), rgb(126, 44, 123, 0));
        opacity: 0;
        transition: opacity 200ms ease-out;
        pointer-events: none;
    }

    .core-callout-tiles.callout-tiles-marquee .slide:hover .img-cont::before,
    .core-callout-tiles.callout-tiles-marquee .slide:hover .img-cont-promoted::before {
        content: "";
        opacity: 1;
        transition: opacity 200ms ease-in;
        z-index: 1;
    }
}
@media (hover: hover) {
    .core-callout-tiles.callout-tiles-marquee .slide:hover .img-cont img,
    .core-callout-tiles.callout-tiles-marquee .slide:hover .img-cont-promoted img {
        transform: scale(1.2);
    }
}

@media screen and (min-width:64em) {
    
.ccl-widget.core-callout-tiles.callout-tiles-marquee .slides {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(6, 1fr);
    gap: 10px;
    row-gap: var(--space-2);
    column-gap: var(--space-2);
    grid-template-rows: min-content 1fr
}
.ccl-widget.core-callout-tiles.callout-tiles-marquee .slide .content-section {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: var(--space-10);
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.ccl-widget.core-callout-tiles.callout-tiles-marquee .slide .slide-title {
    font-size: 44px;
    text-transform: uppercase;
    text-align: left;
    line-height: 1;
    text-shadow: 0px 10px 15px rgb(0, 0, 0, 0.4);
}
/*--Promoted Slides(#2,5,8)--*/
.ccl-widget.core-callout-tiles.callout-tiles-marquee .slides .slide:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / span 1;
}
.ccl-widget.core-callout-tiles.callout-tiles-marquee .slides .slide:nth-child(2) {
    grid-column: 2;
    grid-row: 1 / span 2;
}
.ccl-widget.core-callout-tiles.callout-tiles-marquee .slides .slide:nth-child(3) {
    grid-column: 1;
    grid-row: 2 / span 1;
}
.ccl-widget.core-callout-tiles.callout-tiles-marquee .slides .slide:nth-child(4) {
    grid-column: 2;
    grid-row: 3 / span 1;
}
.ccl-widget.core-callout-tiles.callout-tiles-marquee .slides .slide:nth-child(5) {
    grid-column: 1;
    grid-row: 3 / span 2;
}
.ccl-widget.core-callout-tiles.callout-tiles-marquee .slides .slide:nth-child(6) {
    grid-column: 2;
    grid-row: 4 /span 3;
}
.ccl-widget.core-callout-tiles.callout-tiles-marquee .slides .slide:nth-child(7) {
    grid-column: 1;
    grid-row: 5 / span 1;
}
.ccl-widget.core-callout-tiles.callout-tiles-marquee .slides .slide:nth-child(8) {
    grid-column: 2;
    grid-row: 5 / span 2;
}
.ccl-widget.core-callout-tiles.callout-tiles-marquee .slides .slide:nth-child(9) {
    grid-column: 1;
    grid-row: 6 /span 1;
}
.core-callout-tiles.callout-tiles-marquee .slide .img-cont::before {
    content: "";
    position: absolute;
    top: -75%;
    right: initial;
    left: -17%;
    width: 125%;
    height: 125%;
    transform: rotate(159deg);
    background: linear-gradient(to left, rgb(126, 44, 123, 0.9), rgb(126, 44, 123, 0));
    opacity: 0;
    transition: opacity 200ms ease-out;
}
.core-callout-tiles.callout-tiles-marquee .slide .img-cont-promoted::before {
    content: "";
    position: absolute;
    top: -97%;
    right: initial;
    left: -48%;
    width: 168%;
    height: 125%;
    transform: rotate(158deg);
    background: linear-gradient(to left, rgb(126, 44, 123, 0.9), rgb(126, 44, 123, 0));
    opacity: 0;
    transition: opacity 200ms ease-out;
    pointer-events: none;
}

.core-callout-tiles.callout-tiles-marquee .slide:hover .img-cont::before,
.core-callout-tiles.callout-tiles-marquee .slide:hover .img-cont-promoted::before {
    content: "";
    opacity: 1;
    transition: opacity 200ms ease-in;
    z-index: 1;
}
}