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

.ColumnContainer {
    row-gap: functions.pxRem(40);

    @media all and (min-width: functions.em(1024)) {
        margin-left: functions.pxRem(-36);
        margin-right: functions.pxRem(-36);
    }
}

.Column {
    width: 100%;

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

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

    &:last-child {
        .Images--Multiple {
            padding-bottom: 0;
        }
    }

    &--MobileFirst {
        @media all and (max-width: functions.em(767)) {
            order: 1;
        }
    }

    &--MobileSecond {
        @media all and (max-width: functions.em(767)) {
            order: 2;
        }
    }

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

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

.Text {
    margin-top: functions.pxRem(40);

    &:first-child {
        margin-top: 0;
    }
}

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

.Media {
    position: relative;

    &--Single {
        @media all and (min-width: functions.em(1200)) {
            width: 83.3333%;
        }

        .Icons {
            position: absolute;
            top: functions.pxRem(20);
            right: functions.pxRem(20);

            @media all and (min-width: functions.em(1440)) {
                top: functions.pxRem(50);
                right: functions.pxRem(50);
            }
        }
    }

    &--Multiple {
        max-width: functions.pxRem(600);
        display: grid;

        &:before {
            content: '';
            padding-top: 7%;
            display: block;
            grid-column: 1;
            grid-row: 1;
        }

        .MediaItem {
            grid-column: 1;
            grid-row: 1;

            &:first-child {
                width: 70%;
                transform: rotate(-6deg);
                transform-origin: top left;
            }

            &:nth-child(2) {
                width: 48%;
                transform: rotate(6deg);
                transform-origin: top right;
                margin-top: 44%;
                margin-left: auto;
            }
        }

        .Icons {
            position: absolute;
            top: 16%;
        }
    }
}

.MediaItem {
    display: block;
}

.Image, .Video {
    width: 100%;
    display: block;
    border-radius: functions.pxRem(10);
    border: none;
    overflow: hidden;
    background-color: transparent;

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

.Icons {
    width: 32%;
    aspect-ratio: 1/1;
    background-color: colours.$green;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 58%;
    z-index: 1;
    fill: colours.$orange;
    padding: 7%;

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

    @media all and (min-width: functions.em(variables.$container-width)) {
        width: functions.pxRem(192);
    }

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

    svg {
        width: 100%;
        aspect-ratio: 1/1;
        object-fit: contain;
    }
}