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

.Inner {
    display: flex;
    flex-direction: column;
    gap: functions.pxRem(20);
}

.Heading {
    @media all and (min-width: functions.em(768)) {
        max-width: functions.pxRem(1134);
    }
}

.Tags {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: functions.pxRem(10);
    color: colours.$green;

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

    &--White {
        color: #fff;
    }
}

.Tag {
    padding: functions.pxRem(4) functions.pxRem(8) functions.pxRem(2);
    border-radius: functions.pxRem(4);
    border: functions.pxRem(1) solid;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;

    @media all and (min-width: functions.em(768)) {
        padding: functions.pxRem(6) functions.pxRem(12) functions.pxRem(4);
    }

    &--HoverGreen:hover {
        background-color: colours.$green;
        color: #FFF;
    }

    &--HoverWhite:hover {
        background-color: #FFF;
        color: colours.$green;
    }
}