@use '../../../styles/tools/functions';
@use '../../../styles/settings/colours';
@use '../../../styles/settings/variables';

.Card {
    border-radius: functions.pxRem(10);
    overflow: hidden;
    position: relative;
    z-index: 0;

    @media all and (min-width: functions.em(768)) {
        display: flex;
        border-radius: functions.pxRem(20);
    }

    &--BGWhite {
        background-color: #FFF;
        fill: colours.$orange;
        color: colours.$orange;
    }

    &--BGGreen {
        background-color: colours.$green;
        fill: #FFF;
        color: #FFF;
    }

    &--LayoutTextImages {
        .Media {
            @media all and (min-width: functions.em(768)) {
                order: 2;
            }
        }

        .Content {
            @media all and (min-width: functions.em(768)) {
                order: 1;
            }
        }

        .Badge {
            margin-left: auto;
        }
    }
}

.Media {
    display: grid;
    aspect-ratio: 335/264;
    position: relative;

    @media all and (min-width: functions.em(768)) {
        width: 50%;
        aspect-ratio: 620/669;
    }

    .Carousel {
        width: 100%;
        height: 100%;
        position: absolute;
    }
}

.Image {
    width: 100%;
    height: 100%;
    grid-row: 1;
    grid-column: 1;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    display: block;
    transform: scale(1) translateZ(1px);
    image-rendering: -webkit-optimize-contrast;
    transition: transform 0.6s;
}

.Video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    border: none;
    background-color: transparent;
    overflow: hidden;
    z-index: 1;
    border-radius: 0;
    grid-row: 1;
    grid-column: 1;
}

.Badge {
    display: none;

    @media all and (min-width: functions.em(768)) {
        max-height: functions.pxRem(140);
        max-width: 100%;
        grid-row: 1;
        grid-column: 1;
        z-index: 1;
        display: block;
        margin: functions.pxRem(30);
    }

    @media all and (min-width: functions.em(1024)) {
        max-height: functions.pxRem(180);
        margin: functions.pxRem(60);
    }

    @media all and (min-width: functions.em(1440)) {
        max-height: functions.pxRem(210);
        margin: functions.pxRem(60);
    }

    &--PositionTop {
        margin-bottom: auto;
    }

    &--PositionBottom {
        margin-top: auto;
    }
}

.Content {
    padding: functions.pxRem(30);

    @media all and (min-width: functions.em(768)) {
        width: 50%;
        align-self: center;
    }

    @media all and (min-width: functions.em(1024)) {
        padding: functions.pxRem(80);
    }

    p, ul, ol {
        @media all and (min-width: functions.em(768)) {
            margin-bottom: 1.5em;
        }

        &:last-child {
            margin-bottom: 0;
        }
    }

    ul {
        list-style-type: none;
        padding-left: 0;

        li {
            position: relative;
            padding-left: 1.1em;

            &:before {
                content: '';
                width: 0.3em;
                border-bottom: functions.pxRem(1) solid;
                position: absolute;
                top: 0.65em;
                left: 0;
            }
        }
    }
}

.Icon {
    height: functions.pxRem(60);
    width: functions.pxRem(100);
    margin-bottom: functions.pxRem(20);
    display: flex;
    align-items: center;

    @media all and (min-width: functions.em(768)) {
        height: functions.pxRem(100);
        width: functions.pxRem(140);
        margin-bottom: functions.pxRem(40);
    }

    svg {
        max-height: 100%;
    }
}

.Button {
    margin-top: functions.pxRem(30);

    a {
        width: 100%;

        @media all and (min-width: functions.em(520)) {
            width: auto;
        }
    }
}