$medium-breakpoint: 900px; $large-breakpoint: 1200px; @mixin responsive-container($width-breakpoint: $large-breakpoint) { margin-left: auto; margin-right: auto; width: $width-breakpoint; @media (max-width: $width-breakpoint) { width: 100%; } } @mixin patterned-shadow($size) { position: relative; &::after { --shadow-size: #{$size}; background: url('/assets/shadow-pattern.png') repeat; content: ''; height: 100%; left: var(--shadow-size); position: absolute; top: var(--shadow-size); width: 100%; z-index: -1; } }