/* FX Pro Robots V6 unified grid fix.
   Bootstrap's clearfix pseudo-elements must never become grid items. */
.fxp-grid::before,
.fxp-grid::after {
  content: none !important;
  display: none !important;
}

.fxp-grid {
  display: grid !important;
  float: none !important;
  grid-auto-flow: row !important;
  grid-auto-rows: 1fr;
  align-items: stretch !important;
  justify-items: stretch !important;
  gap: 20px !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

.fxp-grid > .blog-item {
  float: none !important;
  clear: none !important;
  display: flex !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
  grid-column: auto !important;
  grid-row: auto !important;
}

.fxp-grid > .blog-item > .meta-data {
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
}

.fxp-grid-4 {
  width: min(1440px, calc(100% - 32px)) !important;
  max-width: 1440px !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.fxp-grid-3 {
  width: min(1180px, calc(100% - 32px)) !important;
  max-width: 1180px !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

@media (max-width: 1199px) {
  .fxp-grid-4 {
    width: min(840px, calc(100% - 32px)) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 899px) {
  .fxp-grid-3 {
    width: min(780px, calc(100% - 32px)) !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 639px) {
  .fxp-grid-4,
  .fxp-grid-3 {
    width: min(460px, calc(100% - 24px)) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }
}