@import '../../../styles/definitions/breakpoints';
@import '../../../styles/definitions/colors';
@import '../../../constants/modifiers';
@import '../../../styles/mixins';
@import "../../../styles/grid.scss";

// Component Styles
.carouselSlideImage {
    &_content {
        display: block;
        height: 100%;
        border-radius: 8px;
        background: var(--background-color, transparent) no-repeat center/cover;
        background-image: var(--image-url);
        text-decoration: none;
        font-size: $headingFontSize6;

        &--fit {
            background-size: contain;
        }

        @include media-lg-up {
            &--text-size-small {
                font-size: $headingFontSize4;
            }
            &--text-size-medium {
                font-size: $headingFontSize2;
            }
            &--text-size-large {
                font-size: $headingFontSize1;
            }
        }
    }
    &_text {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        height: 100%;
        padding: 0 10%;
        text-align: center;

        @include media-sm-up {	
            padding: 0 20%;	
        }
    }
    &_title {
        @include title-3;
        color: var(--text-color, $body-color);

        @include media-md-up {
            @include title-xxLarge;
            line-height: 1.2;
        }
    }
    &_description {
        opacity: 0.8;
        color: var(--text-color, $body-color);
    }
}
