// Tablet size breakpoint 600px.
@mixin media-tablet {
  @media screen and (min-width: 37.5rem) {
    @content;
  }
}

// Desktop size breakpoint 900px.
@mixin media-large {
  @media screen and (min-width: 56.25rem) {
    @content;
  }
}

// Wide Desktop size breakpoint 1200px.
@mixin media-wide {
  @media screen and (min-width: 75rem) {
    @content;
  }
}

@mixin button {
  background: $dcb-blue;
  border: 0;
  color: white;
  font-weight: bold;
  padding: 0.5rem 1rem;
  text-transform: uppercase;

  &:hover,
  &:focus {
    background: $dcb-green;
  }
}