@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