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

.BlockWrapper {
    overflow: hidden;
}

.Heading {
    margin-bottom: functions.pxRem(20);

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

.Carousel {
    display: flex;
    gap: functions.pxRem(20);

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

.CarouselTeamMemberCard {
    width: functions.pxRem(260);
    min-width: functions.pxRem(260);

    @media all and (min-width: functions.em(375)) {
        width: functions.pxRem(300);
        min-width: functions.pxRem(300);
    }
}

.Grid {
    display: none;

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

.TeamMemberColumnContainer {
    @media all and (min-width: functions.em(1024)) {
        margin-left: functions.pxRem(-24);
        margin-right: functions.pxRem(-24);
        row-gap: functions.pxRem(48);
    }
}

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

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

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