$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("/shadow-pattern.png") repeat;
    content: "";
    height: 100%;
    left: var(--shadow-size);
    position: absolute;
    top: var(--shadow-size);
    width: 100%;
    z-index: -1;
  }
}