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

.Inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: functions.pxRem(10);

    @media all and (min-width: functions.em(768)) {
        gap: functions.pxRem(30);
    }

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

.Media {
    width: 100%;
    overflow: hidden;
    align-self: stretch;
    border-radius: functions.pxRem(10);
    position: relative;

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

    &:first-child {
        grid-row: 1 / span 2;
        grid-column: 1;
    }
    
    &:nth-child(2) {
        grid-row: 1;
        grid-column: 2;
        aspect-ratio: 16/9;
    }
    
    &:nth-child(3) {
        grid-row: 2;
        grid-column: 2;
        aspect-ratio: 16/9;
    }
}

.Caption {
    display: none;

    @media all and (min-width: functions.em(768)) {
        max-width: calc(100% - functions.pxRem(20));
        display: block;
        position: absolute;
        bottom: functions.pxRem(20);
        left: functions.pxRem(20);
        z-index: 1;
        background-color: #FFF;
        border-radius: functions.pxRem(8);
        padding: functions.pxRem(8) functions.pxRem(12) functions.pxRem(6);
        color: colours.$green;
    }
}

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

.Image, .Video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: functions.pxRem(10);

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