$display-breakpoints: map-deep-merge(
  (
    "print-only": "only print",
    "screen-only": "only screen",
    "xs-only": "only screen and (max-width: #{map-get($grid-breakpoints, "sm")-1})",
    "sm-only": "only screen and (min-width: #{map-get($grid-breakpoints, "sm")}) and (max-width: #{map-get($grid-breakpoints, "md")-1})",
    "sm-and-down": "only screen and (max-width: #{map-get($grid-breakpoints, "md")-1})",
    "sm-and-up": "only screen and (min-width: #{map-get($grid-breakpoints, "sm")})",
    "md-only": "only screen and (min-width: #{map-get($grid-breakpoints, "md")}) and (max-width: #{map-get($grid-breakpoints, "lg")-1})",
    "md-and-down": "only screen and (max-width: #{map-get($grid-breakpoints, "lg")-1})",
    "md-and-up": "only screen and (min-width: #{map-get($grid-breakpoints, "md")})",
    "lg-only": "only screen and (min-width: #{map-get($grid-breakpoints, "lg")}) and (max-width: #{map-get($grid-breakpoints, "xl")-1})",
    "lg-and-down": "only screen and (max-width: #{map-get($grid-breakpoints,"xl")-1})",
    "lg-and-up": "only screen and (min-width: #{map-get($grid-breakpoints,"lg")})",
    "xl-only": "only screen and (min-width: #{map-get($grid-breakpoints,"xl")})",
  ),
  $display-breakpoints
);

$display-breakpoints: map-deep-merge(
  (
    "print-only": "only print",
    "screen-only": "only screen",
    "xs-only": "only screen and (max-width: #{map-get($grid-breakpoints, " sm
      ")-1})",
    "sm-only": "only screen and (min-width: #{map-get($grid-breakpoints, " sm
      ")}) and (max-width: #{map-get($grid-breakpoints, " md ")-1})",
    "sm-and-down": "only screen and (max-width: #{map-get($grid-breakpoints, "
      md ")-1})",
    "sm-and-up": "only screen and (min-width: #{map-get($grid-breakpoints, " sm
      ")})",
    "md-only": "only screen and (min-width: #{map-get($grid-breakpoints, " md
      ")}) and (max-width: #{map-get($grid-breakpoints, " lg ")-1})",
    "md-and-down": "only screen and (max-width: #{map-get($grid-breakpoints, "
      lg ")-1})",
    "md-and-up": "only screen and (min-width: #{map-get($grid-breakpoints, " md
      ")})",
    "lg-only": "only screen and (min-width: #{map-get($grid-breakpoints, " lg
      ")}) and (max-width: #{map-get($grid-breakpoints, " xl ")-1})",
    "lg-and-down": "only screen and (max-width: #{map-get($grid-breakpoints," xl
      ")-1})",
    "lg-and-up": "only screen and (min-width: #{map-get($grid-breakpoints," lg
      ")})",
    "xl-only": "only screen and (min-width: #{map-get($grid-breakpoints," xl
      ")})",
  ),
  $display-breakpoints
);