/* Fix the 1199px exact browser rounding glitch in Semantic UI */
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
  /* 1. Hide the grid structures that belong strictly to larger/smaller tiers */
  .ui.grid > .row.large.screen.only,
  .ui.grid > .column.large.screen.only,
  .ui.grid > .row.tablet.only,
  .ui.grid > .column.tablet.only,
  .ui.grid > .row.mobile.only,
  .ui.grid > .column.mobile.only {
    display: none !important;
  }

  /* 2. Enforce the visibility of the computer layout */
  .ui.grid > .row.computer.only,
  .ui.grid > .column.computer.only {
    display: flex !important; /* Semantic UI grids rely on flex display */
  }
}




/* Fix the 991px browser rounding glitch in Semantic UI */
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
  /* 1. Hide the grid structures that belong strictly to larger/smaller tiers */
  .ui.grid > .row.large.screen.only,
  .ui.grid > .column.large.screen.only,
  .ui.grid > .row.computer.only,
  .ui.grid > .column.computer.only,
  .ui.grid > .row.mobile.only,
  .ui.grid > .column.mobile.only {
    display: none !important;
  }

  /* 2. Enforce the visibility of the tablet layout */
  .ui.grid > .row.tablet.only,
  .ui.grid > .column.tablet.only {
    display: flex !important; /* Semantic UI grids rely on flex display */
  }
}



/* Fix the 767px browser rounding glitch in Semantic UI */
@media only screen and (max-width: 767.98px) {
  /* 1. Hide the grid structures that belong strictly to larger tiers */
  .ui.grid > .row.large.screen.only, .ui.grid > .column.large.screen.only,
  .ui.grid > .row.computer.only,     .ui.grid > .column.computer.only,
  .ui.grid > .row.tablet.only,       .ui.grid > .column.tablet.only {
    display: none !important;
  }

  /* 2. Enforce the visibility of the mobile layout */
  .ui.grid > .row.mobile.only,
  .ui.grid > .column.mobile.only {
    display: flex !important; /* Force Semantic UI's default flex display */
  }
}