/* =========================================================
   TARGETES QUALITATS BLOCK (IMAGES ONLY)
   ========================================================= */

.c-targetes-qualitats {
  margin-top: var(--mar-t, 0px);
  margin-bottom: var(--mar-b, 0px);
  padding-top: var(--pad-t, 80px);
  padding-bottom: var(--pad-b, 80px);
}

.c-targetes-qualitats__max-width {
  max-width: var(--max-w, 1440px);
  margin: 0 auto;
}

.c-targetes-qualitats--placeholder {
  padding: 60px 20px;
  text-align: center;
  background: #f0f0f0;
  border: 2px dashed #ccc;
  border-radius: 8px;
  color: #666;
}

.c-targetes-qualitats__list {
  row-gap: var(--gap-desk, 24px);
  column-gap: var(--gap-desk, 24px);
  align-items: center; 
}

.c-targetes-qualitats__card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.c-targetes-qualitats__image {
  width: 100%;
  aspect-ratio: var(--img-ratio, 1/1);
  height: var(--img-h, auto);
  object-fit: var(--img-fit-desk, contain);
  border-radius: var(--br-img, 0px);
  display: block;
}

.c-targetes-qualitats__placeholder {
  width: 100%;
  aspect-ratio: var(--img-ratio, 1/1);
  height: var(--img-h, auto);
  background-color: #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  border-radius: var(--br-img, 0px);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1024px) {
  .c-targetes-qualitats__card {
    grid-column: span 6; 
  }
}

@media (max-width: 768px) {
  .c-targetes-qualitats {
    margin-top: var(--mar-t-mob, 0px);
    margin-bottom: var(--mar-b-mob, 0px);
    padding-top: var(--pad-t-mob, 60px);
    padding-bottom: var(--pad-b-mob, 60px);
  }

  .c-targetes-qualitats__list {
    row-gap: var(--gap-mob, 40px);
    column-gap: var(--gap-mob, 40px);
  }

  .c-targetes-qualitats__card {
    grid-column: 1 / -1; 
  }

  .c-targetes-qualitats__image,
  .c-targetes-qualitats__placeholder {
    height: var(--img-h-mob, auto);
    object-fit: var(--img-fit-mob, contain);
  }
}