/* Layout override for mondo.html: remove the right column and make the center showcase more fluid. */

.full-width-container > .row:first-of-type > .col-hero:last-child,
.col-sidebar--right,
.navbar-helpers-bar__sidebar-right-toggle {
  display: none !important;
}

.main-content-wrapper {
  width: 100%;
  max-width: 100%;
}

.image-grid {
  width: 100%;
  margin-inline: auto;
}

.image-grid__title-wrapper,
.video-grid__filters-wrapper,
.image-grid__paginator-wrapper {
  padding-inline: clamp(0.75rem, 2vw, 1.5rem);
}

.image-grid__grid {
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: clamp(0.85rem, 1.8vw, 1.35rem);
}

.image-grid__item {
  float: none !important;
  display: block;
  flex: 1 1 220px;
  width: 100% !important;
  max-width: none;
  margin: 0 !important;
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.hero__image,
.hero__image img {
  width: 100%;
}

.hero__image img {
  display: block;
  height: auto;
  object-fit: cover;
}

@media (min-width: 992px) {
  .full-width-container > .row:first-of-type > .col-md-70.col-lg-60.col-xl-60,
  .col-sidebar--left + .col-100.col-md-70.col-lg-60 {
    flex: 0 0 80%;
    max-width: 80%;
  }
}

@media (max-width: 1199.98px) {
  .col-sidebar--left {
    order: 2;
  }

  .col-sidebar--left + .col-100.col-md-70.col-lg-60 {
    order: 1;
  }
}

@media (max-width: 991.98px) {
  .full-width-container > .row:first-of-type > .col-hero,
  .full-width-container > .row:first-of-type > .col-md-70.col-lg-60.col-xl-60,
  .col-sidebar--left,
  .col-sidebar--left + .col-100.col-md-70.col-lg-60 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

@media (max-width: 767.98px) {
  .image-grid__grid {
    justify-content: center;
  }

  .image-grid__item {
    flex-basis: 190px;
  }

  .video-grid__filters-wrapper,
  .image-grid__paginator-wrapper {
    display: flex;
    justify-content: center;
  }
}

@media (max-width: 479.98px) {
  .image-grid__item {
    flex-basis: 100%;
    max-width: 320px;
  }
}