/*****************
 * Variable Classes
 *****************/
:root{
	/* Colours */
    --primary_one: #1562b1;
    --primary_two: #5b91c8;
    --primary_three: #063a6f;
    --primary_four: #0377b9;
    --secondary_one: #cfb3cd;
    --secondary_two: #e9dde8;
    --secondary_three: #af83ab;
    --secondary_four: #94588f;
    --action_one: #ff6663;
    --action_two: #b145a3;
    --action_three: #ffbb63;
    --action_four: #e59c38;
    --shades_one: #f4f4f4;
    --shades_two: #f6f6f6;
    --shades_three: #838383;
    --shades_four: #1d1d1d;

    /* Spacing */
    --fsf-default-gap: 16px;

}

.fsf-pad-five{
    padding: 5%;
}
.fsf-center{
	text-align: center;
}
.fsf-text-white{
    color: var(--shades_one);
}
.fsf-text-black{
    color: var(--shades_four);
}
.fsf-bg-white{
    background-color: var(--shades_one);
}

/*****************
 * Grids
 *****************/

.fsf-grid{
	display: grid;
	gap: var(--fsf-default-gap);
}
.fsf-grid_col_5{
	grid-template-columns: calc(100%/5 - var(--fsf-default-gap))calc(100%/5 - var(--fsf-default-gap))calc(100%/5 - var(--fsf-default-gap))calc(100%/5 - var(--fsf-default-gap))calc(100%/5 - var(--fsf-default-gap));
}

/*****************
 * Flexes
 *****************/

 .fsf-flex{
	display: flex;
	gap: var(--fsf-default-gap);
}
.fsf-flex-col{
	flex-direction:column;
}

/*****************
 * Specifics
 *****************/

.fsf-background-center{
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: -2;
}
.fsf-background-overlay:before{
    content: '';
    position: absolute;
    inset: 0;
    opacity: 1;
    background-position: center center;
    background-size: cover;
    mix-blend-mode: multiply;
}
.fsf-isolate{
    isolation: isolate;
}

.fsf-button{
    text-decoration:none;
}