.qbr-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 30px;
  width: 100%;
  clear: both;
}

/* Neutraliza el float y el ancho en % que arrastra .one-third.column */
.qbr-grid .item {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  display: block;
}

/* Imágenes parejas aunque el archivo original no sea exacto.
   420x336 = 5/4. Si usás las de 420x268 cambiá a 420/268. */
.qbr-grid .item img.pic {
  display: block;
  width: 100% !important;
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  max-width: 100%;
  background: #f5f5f5;
}

/* Subtítulo "Insumos – Marca" */
.qbr-grid .item p.brand {
  margin: 4px 0 0 0;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #999;
}

/* --- Responsive ------------------------------------------- */
@media (max-width: 767px) {
  .qbr-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .qbr-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Fallback sin aspect-ratio (Safari viejo / IE) */
@supports not (aspect-ratio: 5 / 4) {
  .qbr-grid .item img.pic {
    height: 240px;
  }
}

/* --- Título + breadcrumb en la misma línea ------------------ */
.qbr-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.qbr-title-row h1 {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}

.qbr-title-row h6 {
  margin: 0;
  flex: 0 0 auto;
  white-space: nowrap;
  opacity: .85;
}

/* En mobile se apilan: el título es largo y el breadcrumb
   quedaría comprimido contra el borde */
@media (max-width: 767px) {

  /* El layout "boxed" no aporta nada en celular */
  #wrap.boxed {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* Solo el contenido y el título. El header y el footer
     conservan su padding original y no se desarman. */
  .page-title .container,
  .container.main-content {
    width: auto !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Título alineado a la izquierda y más chico */
  .qbr-title-row {
    text-align: left;
  }

  .qbr-title-row h1 {
    font-size: 26px !important;
    line-height: 1.25 !important;
    text-align: left;
  }

  /* Solo el breadcrumb va centrado */
  .qbr-title-row h6 {
    display: block;
    text-align: center;
    margin-top: 12px;
  }
}