/**
 * Helpers
 */

.d-none  {display: none !important;}
.d-block {display: block;}
.d-flex  {display: flex;}

.w-100   {width: 100%;}

.flex-row {
    display: flex;
    flex-direction: row;
}
.flex-row-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.flex-col {
    display: flex;
    flex-direction: column;
}
.flex-1 { flex: 1; }
.justify-center {justify-content: center;}
.align-center {align-items: center;}

/**
 * Margin
 */
.m-0 { margin: 0px ;}
.m-1 { margin: 5px;}
.m-2 { margin: 10px;}
.m-3 { margin: 15px;}
.m-4 { margin: 20px;}
.m-5 { margin: 25px;}
.m-6 { margin: 30px;}
.m-7 { margin: 35px;}
.m-8 { margin: 40px;}
.m-9 { margin: 45px;}
.m-10 { margin: 50px;}

.mt-0 { margin-top: 0px ;}
.mt-1 { margin-top: 5px;}
.mt-2 { margin-top: 10px;}
.mt-3 { margin-top: 15px;}
.mt-4 { margin-top: 20px;}
.mt-5 { margin-top: 25px;}
.mt-6 { margin-top: 30px;}
.mt-7 { margin-top: 35px;}
.mt-8 { margin-top: 40px;}
.mt-9 { margin-top: 45px;}
.mt-10 { margin-top: 50px;}

.mr-0 { margin-right: 0px ;}
.mr-1 { margin-right: 5px ;}
.mr-2 { margin-right: 10px ;}
.mr-3 { margin-right: 15px;}
.mr-4 { margin-right: 20px;}
.mr-5 { margin-right: 25px;}
.mr-6 { margin-right: 30px;}
.mr-7 { margin-right: 35px;}
.mr-8 { margin-right: 40px;}
.mr-9 { margin-right: 45px;}
.mr-10 { margin-right: 50px;}

.mb-0 { margin-bottom: 0px ;}
.mb-1 { margin-bottom: 5px;}
.mb-2 { margin-bottom: 10px;}
.mb-3 { margin-bottom: 15px;}
.mb-4 { margin-bottom: 20px;}
.mb-5 { margin-bottom: 25px;}
.mb-6 { margin-bottom: 30px;}
.mb-7 { margin-bottom: 35px;}
.mb-8 { margin-bottom: 40px;}
.mb-9 { margin-bottom: 45px;}
.mb-10 { margin-bottom: 50px;}

.ml-0 { margin-left: 0px ;}
.ml-1 { margin-left: 5px;}
.ml-2 { margin-left: 10px;}
.ml-3 { margin-left: 15px;}
.ml-4 { margin-left: 20px;}
.ml-5 { margin-left: 25px;}
.ml-6 { margin-left: 30px;}
.ml-7 { margin-left: 35px;}
.ml-8 { margin-left: 40px;}
.ml-9 { margin-left: 45px;}
.ml-10 { margin-left: 50px;}


/**
 * Padding
 */
.p-0 { padding: 0px ;}
.p-1 { padding: 5px;}
.p-2 { padding: 10px;}
.p-3 { padding: 15px;}
.p-4 { padding: 20px;}
.p-5 { padding: 25px;}
.p-6 { padding: 30px;}
.p-7 { padding: 35px;}
.p-8 { padding: 40px;}
.p-9 { padding: 45px;}
.p-10 { padding: 50px;}


/**
 * Font size
 */
.fs-0 {font-size: 10px;}
.fs-1 {font-size: 12px;}
.fs-2 {font-size: 15px;}
.fs-3 {font-size: 18px;}
.fs-4 {font-size: 24px;}
.fs-5 {font-size: 28px;}
.fs-6 {font-size: 32px;}
.fs-7 {font-size: 36px;}
.fs-8 {font-size: 42px;}
.fs-9 {font-size: 48px;}

@media screen and (max-width: 768px) {
    .fs-0 {font-size: 9px;}
    .fs-1 {font-size: 10px;}
    .fs-2 {font-size: 12px;}
    .fs-3 {font-size: 15px;}
    .fs-4 {font-size: 18px;}
    .fs-5 {font-size: 20px;}
    .fs-6 {font-size: 24px;}
    .fs-7 {font-size: 28px;}
    .fs-8 {font-size: 32px;}
    .fs-9 {font-size: 36px;}
}


/**
 * Font weight
 */
.fw-100 {font-weight: 100;}
.fw-200 {font-weight: 200;}
.fw-300 {font-weight: 300;}
.fw-400 {font-weight: 400;}
.fw-500 {font-weight: 500;}
.fw-600 {font-weight: 600;}
.fw-700 {font-weight: 700;}
.fw-800 {font-weight: 800;}
.fw-900 {font-weight: 900;}


/**
 * Grids
 */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.col-2 {grid-column: span 2;}
.col-3 {grid-column: span 3;}
.col-4 {grid-column: span 4;}

.gap-1 {grid-gap: 5px;}
.gap-2 {grid-gap: 10px;}
.gap-3 {grid-gap: 10px;}
.gap-4 {grid-gap: 20px;}

/**
 * Tags
 */
.tag {
    border: 1px solid #000;
    border-radius: 100px;
    padding: 3px 10px;
    font-size: 12px;;
}