.mosaic-grid-hero {
    padding: var(--space-8) var(--space-5) var(--space-8);
    background-image: url(../svg/energy_pinkwave.svg), url(../svg/energy_yellowavebluedot.svg);
    background-position: top left, bottom -75px right -265px;
    background-repeat: no-repeat, no-repeat;
}

.mosaic-grid-hero .widget-inner .slides {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 5px;
}

.mosaic-grid-hero .slide {
    position: relative;
    width: 100%;
    max-width: calc(50% - 2.5px);
}

.mosaic-grid-hero .slide .inner .img-cont,
.mosaic-grid-hero .slide .inner img {
    width: 100%;
    height: auto;
}

.mosaic-grid-hero .slide .inner .content-section .slide-title {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    position: absolute;
    bottom: 0;
    left: 0;
    background: var(--sw-key-color);
    clip-path: polygon(100.9% 100%, 0% 100%, 0% 0%, 92.2% 16.96%, 100.9% 100%);
    opacity: 0.9;
    padding: var(--space-4) var(--space-5) var(--space-3) var(--space-4);
}

.mosaic-grid-hero .slide .inner .content-section .slide-title > a {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.mosaic-grid-hero .slide .inner .content-section .slide-title .subtitle {
    color: var(--white);
    font-family: var(--font-semibold);
    line-height: var(--leading-tight);
    font-weight: 700;
}

.mosaic-grid-hero .slide .inner .content-section .slide-title .title {
    color: var(--white);
    font-family: var(--font-semibold);
    line-height: var(--leading-tight);
    font-weight: 700;
}

.mosaic-grid-hero .slide.promoted-second .inner .content-section .slide-title {
    padding: var(--space-8) var(--space-8) var(--space-3) var(--space-4);
    clip-path: polygon(93.03% 100%, 0% 100%, 0% 0%, 100% 19.25%);
}

.mosaic-grid-hero .slide.promoted-first {
    order: 1;
}

.mosaic-grid-hero .slide.promoted-first .inner .content-section .slide-title {
    background: var(--pink-90);
}

.mosaic-grid-hero .slide.promoted-second {
    order: 0;
    max-width: 100%;
}

.mosaic-grid-hero .slide.promoted-second .inner .content-section .slide-title {
    background: var(--green);
}

.mosaic-grid-hero .slide.promoted-second .inner .content-section .slide-title .title {
    font-family: var(--font-title-giant);
    font-size: 1.625rem;
    font-weight: 400;
    line-height: var(--leading-header);
}

.mosaic-grid-hero .slide.promoted-third {
    order: 2;
}

.mosaic-grid-hero .slide.promoted-third .inner .content-section .slide-title {
    background: var(--red-90);
}

.mosaic-grid-hero .slide.promoted-fourth {
    order: 3;
}

.mosaic-grid-hero .slide.promoted-fourth .inner .content-section .slide-title {
    max-width: 100%;
    clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 8.72% 9.57%);
    background: var(--light-blue);
}

.mosaic-grid-hero .slide.promoted-fifth {
    order: 4;
}

.mosaic-grid-hero .slide.promoted-fifth .inner .content-section .slide-title {
    max-width: 100%;
    clip-path: polygon(100% 100%,0% 100%,0% 0%,92.2% 16.96%,100% 100%);
    background: var(--secondary-color);
}

.mosaic-grid-hero .slide.promoted-sixth {
    order: 5;
    max-width: 100%;
    clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 0% 100%, 0% 100%);
}

.mosaic-grid-hero .slide.promoted-sixth .inner .content-section .slide-title {
    bottom: 40px;
}

@media (min-width: 40em) {
    .mosaic-grid-hero {
        padding: 78px 0 0 15px;
    }

    .mosaic-grid-hero .widget-inner .slides {
        gap: 15px;
    }

    .mosaic-grid-hero .slide.promoted-first {
        order: 0;
        max-width: calc(22% - 10px);
    }

    .mosaic-grid-hero .slide.promoted-second {
        order: 1;
        max-width: calc(55% - 10px);
    }

    .mosaic-grid-hero .slide.promoted-third {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        max-width: calc(23% - 10px);
        margin: auto 0 0;
        clip-path: polygon(100% 10%, 0% 0%, 0% 100%, 100% 100%);
    }

    .mosaic-grid-hero .slide.promoted-fourth {
        max-width: calc(27% - 10px);
        clip-path: polygon(15% 0%, 100% 0%, 100% 100%, 0% 100%);
    }

    .mosaic-grid-hero .slide.promoted-fourth .inner .content-section .slide-title {
        max-width: unset;
        padding: var(--space-6) var(--space-6) var(--space-4) var(--space-6);
        clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 5.68% 16.96%, 0% 100%);
        left: -2px;
    }

    .mosaic-grid-hero .slide.promoted-fifth .inner .content-section .slide-title,
    .mosaic-grid-hero .slide.promoted-fifth .inner .content-section .slide-title {
        max-width: unset;
    }

    .mosaic-grid-hero .slide.promoted-fifth {
        max-width: calc(27% - 10px);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 90%, 0% 100%);
    }

    .mosaic-grid-hero .slide.promoted-fifth .inner .content-section .slide-title {
        bottom: 48px;
    }

    .mosaic-grid-hero .slide.promoted-sixth {
        max-width: calc(27% - 10px);
    }

    .mosaic-grid-hero .widget-inner .slide .img-cont .slides {
        height: auto;
        width: 100%;
    }

    .mosaic-grid-hero .slide .inner .content-section h4 {
        font-size: var(--text-lg);
        padding: var(--space-6) 28px var(--space-4);
    }

    .mosaic-grid-hero .slide.promoted-fifth .inner .content-section .slide-title {
        max-width: 50%;
    }
}

@media (min-width: 64em) {
    .mosaic-grid-hero {
        padding: 78px 0 0 15px;
        background-position: top left, bottom right -200px;
        background-size: 226px, 500px;
    }

    .mosaic-grid-hero .slide .inner .content-section .slide-title {
        font-size: var(--text-xl);
        padding: var(--space-5) var(--space-8) var(--space-4) var(--space-6)
    }

    .mosaic-grid-hero .slide.promoted-second .inner .content-section .slide-title {
        padding: var(--space-10) var(--space-12) var(--space-6) var(--space-5);
    }

    .mosaic-grid-hero .slide.promoted-second .inner .content-section .slide-title .subtitle {
        font-size: 1.75rem;
    }

    .mosaic-grid-hero .slide.promoted-second .inner .content-section .slide-title .title {
        font-size: 3.625rem;
        line-height: 4.5rem;
    }

    .mosaic-grid-hero .slide.promoted-fifth .inner .content-section .slide-title {
        bottom: 68px;
    }
}