bauke-xyz/source/scss/mixins.scss

$medium-breakpoint: 900px;
$large-breakpoint: 1200px;

@mixin responsive-container {
  margin-left: auto;
  margin-right: auto;
  width: $large-breakpoint;

  @media (max-width: $large-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;
  }
}