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

.Text {
    max-width: functions.pxRem(980);
    margin-bottom: functions.pxRem(30);

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

.StatCardColumnContainer {
    margin-left: functions.pxRem(-10);
    margin-right: functions.pxRem(-10);
}

.StatCardColumn {
    width: 50%;
    padding-left: functions.pxRem(10);
    padding-right: functions.pxRem(10);

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

.StatCard {
    background-color: #FFF;
    border-radius: functions.pxRem(10);
    padding: functions.pxRem(20);
    display: flex;
    flex-direction: column;
    gap: functions.pxRem(10);

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

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

    &--OrangeLight {
        background-color: colours.$orange-light;
    }
}

.Button {
    margin-top: functions.pxRem(20);
    display: flex;
    justify-content: flex-end;

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