/*
 * 1. OVERRIDE OWL CAROUSEL STYLES
 * This section resets the inline styles added by the Owl Carousel
 * JavaScript that would otherwise interfere with the new grid layout.
 */
.owl-stage-outer {
  overflow: visible !important;
}
.owl-stage {
  transform: none !important;
  width: auto !important;
}
.owl-item {
  width: auto !important;
}
/* This makes the wrappers transparent to the grid layout */
.owl-item,
.top-tasks__divider {
  display: contents;
}


/*
 * 2. MOBILE-FIRST STYLES (Default: up to 569px)
 * This is the base layout for the smallest screens, using the 2-column mobile design.
 */
.owl-stage {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(2, 153px);
  gap: 15px;
}
.top-tasks__box {
  height: 130px !important; /* Mobile item height */
}


/*
 * 3. SMALL TABLET BREAKPOINT (570px and up)
 * Uses a wider 2-column layout with the larger desktop-sized items.
 */
@media (min-width: 570px) {
  .owl-stage {
    grid-template-columns: repeat(2, 312.5px);
    gap: 20px;
  }
  .top-tasks__box {
    height: 300px !important; /* Taller item height for larger screens */
  }
}


/*
 * 4. TABLET/SMALL DESKTOP BREAKPOINT (900px and up)
 * Switches to a 3-column layout. The item height is inherited from the previous breakpoint.
 */
@media (min-width: 900px) {
  .owl-stage {
    grid-template-columns: repeat(3, 312.5px);
  }
  .top-tasks__box .inner.focused {
    opacity: 1
  }
}


/*
 * 5. LARGE DESKTOP BREAKPOINT (1250px and up)
 * Switches to the final 4-column layout.
 */
@media (min-width: 1250px) {
  .owl-stage {
    grid-template-columns: repeat(4, 312.5px);
  }
}