/* Responsive styles - In hindsight, should've used mobile-first */
/* Mixin from: https://css-tricks.com/snippets/sass/mixin-manage-breakpoints/ */
/* It's only used here, so no external file for mixin? */
$breakpoints: (
  'xs':   420px,
  'small':  520px,
  'medium': 768px,
  'large':  1024px,
  'xl':  1200px,
  'xxl': 81.1400px
) !default;

@mixin respond-to($breakpoint) {
	// If the key exists in the map
	@if map-has-key($breakpoints, $breakpoint) {
	  // Prints a media query based on the value
	  @media (min-width: map-get($breakpoints, $breakpoint)) {
		@content;
	  }
	}
   
	// If the key doesn't exist in the map
	@else {
	  @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
		  + "Available breakpoints are: #{map-keys($breakpoints)}.";
	}
  }