/* rem and em do NOT depend on html font-size in media queries! Instead, 1rem = 1em = 16px */

/**************************/
/* BELOW 1344px (Smaller desktops) */
/**************************/

@media (max-width: 84em) {
}

/**************************/
/* BELOW 1200px (Landscape Tablets) */
/**************************/

@media (max-width: 75em) {
    .guide-grid {
        column-gap: 48px;
        row-gap: 64px;
    }
}

/**************************/
/* BELOW 944px (Tablets) */
/**************************/

@media (max-width: 59em) {
}

/**************************/
/* BELOW 704px (Smaller tablets) */
/**************************/

@media (max-width: 44em) {
    /* .grid--3-cols,
    .grid--4-cols {
        grid-template-columns: repeat(2, 1fr) !important;
    } */
}

/**************************/
/* BELOW 544px (Phones) */
/**************************/

@media (max-width: 34em) {
    .guide-card .guide-title--5,
    .guide-card .guide-title--10,
    .guide-card .guide-title--15,
    .guide-card .guide-title--20,
    .guide-card .guide-title--25,
    .guide-card .guide-sub-title--5,
    .guide-card .guide-sub-title--10,
    .guide-card .guide-sub-title--15,
    .guide-card .guide-sub-title--20,
    .guide-card .guide-sub-title--25 {
        flex: 0 0 0%;
    }

    .guide-grid {
        row-gap: 48px !important;
        row-gap: 16px !important;
    }

    .grid--2-cols,
    .grid--3-cols,
    .grid--4-cols {
        grid-template-columns: 1fr !important;
    }

    .btn,
    .btn:link,
    .btn:visited {
        padding: 6px 12px !important;
    }
}

/* 
- Font sizes (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

- Spacing system (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
*/