// Responsive blocks @mixin on-mobile {

@media only screen and (max-width: $mobile-width) {
    @content;
}

} @mixin on-vert-tablet {

@media only screen and (max-width: $vert-tablet-width) {
    @content;
}

} @mixin on-tablet {

@media only screen and (max-width: $tablet-width) {
    @content;
}

}

// Back bois @mixin cutout {

background-color: $back-color;
color: $white-color;
box-shadow: inset 0px 0pt 8pt darken($back-color, 33%);
padding: $spacing-unit;

} @mixin block-cutout {

@include cutout;
display: block;
margin: 0;
margin-top: $spacing-unit;
margin-bottom: $spacing-unit;
padding: 2*$spacing-unit;

} @mixin raised {

background-color: $white-color;
color: $back-color;
box-shadow: 0px 0pt 8pt darken($back-color, 33%);
padding: $spacing-unit;

}