/* Typography */

.jm-font-xs {
    font-family: "Roboto", Arial, sans-serif;
    font-weight: 200;
    font-size: clamp(12px, 0.8vw, 14px);
}

.jm-font-sm {
    font-family: "Roboto", Arial, sans-serif;
    font-weight: 200;
    font-size: clamp(14px, 1vw, 18px);
}

.jm-font-md {
    font-family: "Roboto", Arial, sans-serif;
    font-weight: 200;
    font-size: clamp(18px, 1.3vw, 24px);
}

.jm-font-lg {
    font-family: "Roboto", Arial, sans-serif;
    font-weight: 500;
    font-size: clamp(24px, 2vw, 38px);
}

.jm-font-xl {
    font-family: "Roboto", Arial, sans-serif;
    font-weight: 500;
    font-size: clamp(32px, 3vw, 60px);
}

/* Spacing */

.jm-mb-10 { margin-bottom:10px; }
.jm-mb-20 { margin-bottom:20px; }
.jm-mb-30 { margin-bottom:30px; }

.jm-mt-10 { margin-top:10px; }
.jm-mt-20 { margin-top:20px; }

/* Alignment */

.jm-center { text-align:center; }
.jm-left   { text-align:left; }
.jm-right  { text-align:right; }

/* Colours */

.jm-white { color:#fff; }
.jm-black { color:#000; }
.jm-red   { color:#d71920; }   /* JM Clark red */
.jm-grey  { color:#666; }