
$sm: theme("screens.sm");
$md: theme("screens.md");
$lg: theme("screens.lg");
$xl: theme("screens.xl");
$sm-1: theme("screens.sm-1");
$md-1: theme("screens.md-1");
$lg-1: theme("screens.lg-1");
$xl-1: theme("screens.xl-1");

@media screen and (max-width: $sm-1) {
  .muy-hidden-sm {
    display: none !important;
  }

  .is-root-container .muy-hidden-sm {
    display: block !important;
    opacity: 0.5;

    &[data-type="core/image"] {
      display: table !important;
    }
  }
}

@media screen and (min-width: $sm) and (max-width: $md-1) {
  .muy-hidden-md {
    display: none !important;
  }

  .is-root-container .muy-hidden-md {
    display: block !important;
    opacity: 0.5;

    &[data-type="core/image"] {
      display: table !important;
    }
  }
}

@media screen and (min-width: $md) and (max-width: $xl-1) {
  .muy-hidden-lg {
    display: none !important;
  }

  .is-root-container .muy-hidden-lg {
    display: block !important;
    opacity: 0.5;

    &[data-type="core/image"] {
      display: table !important;
    }
  }
}

@media screen and (min-width: $xl) {
  .muy-hidden-xl {
    display: none !important;
  }

  .is-root-container .muy-hidden-xl {
    display: block !important;
    opacity: 0.5;

    &[data-type="core/image"] {
      display: table !important;
    }
  }
}
