:root {
    --primary: rgb(199, 38, 166);
    --primary__hover: rgba(199, 38, 166, 0.6);
    --dark-blue: hsl(230, 29%, 20%);
    --dark-grey-blue: hsl(230, 11%, 40%);
    --grey-blue: hsl(240, 5.3%, 18.6%);
    --light-grey-blue: #33cccc7a;

    --font-size__base: 16px;

    --gap: 30px;
}

@media screen and (min-width: 991px) {
    :root {
        --gap: 60px;

        --font-size__base: 18px;
    }
}


@font-face {
    font-family: 'BarlowCondensed';
    src: url('../fonts/BarlowCondensed-Regular.ttf');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'BarlowCondensed-Bold';
    src: url('../fonts/BarlowCondensed-Bold.ttf');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Barlow';
    src: url('../fonts/Barlow-Regular.ttf');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}