.slick-slide .carousel-slide {
    padding-right: 2rem;
}


.carousel-slide {
    display: grid !important;
    grid-template-areas: 'carouselSlide';
    color: var(--color-primary-white);
    font-weight: 600;
    text-decoration: none;
    align-items: flex-end;
    transition: all 100ms ease-in-out;
    grid-column: auto;
    max-width: 45rem;

    & > * {
        grid-area: carouselSlide;
    }

    & > img {
        min-width: 100%;
        border-radius: var(--border-radius-common);
        height: 100%;
        object-fit: cover;

        .slick-slide {
            padding-right: 2rem;
        }

    }

    :where(.carousel-slide-text) {
        padding: 0 0 2rem 3.5rem;
        height: calc(100% - 3.5rem);
        align-content: flex-end;
        background: linear-gradient(1deg, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0) 40%);
        border-bottom-left-radius: var(--border-radius-common);
        border-bottom-right-radius: var(--border-radius-common);
    }

}


@media screen and (max-width: 525px) {
    :where(.carousel-slide) {
        max-width: 28rem;
    }

}