@media screen, projection {

.c-sans-serif {

font-family: var(--sans-serif);

}

.c-measure {

max-width: var(--measure);

}

.c-foreground, a.c-foreground {

color: var(--foreground);

}

.c-bg {

background-color: var(--bg);

}

.c-lh-copy {

line-height: var(--lh-copy);

}

.c-lh-title {

line-height: var(--lh-title);

}

.c-accent, a.c-accent {

color: var(--accent);

}

.c-link, a.c-link {

color: var(--link);

}

.c-hyphens {

hyphens: auto;
-webkit-hyphens: auto;

}

// Some empty media queries // Use these if you want to make responsive custom classes

@media #{$breakpoint-not-small} { }

@media #{$breakpoint-medium} { }

@media #{$breakpoint-large} { }

} // End the enclosing screen/projection media query