/* =========================================================================
   Velaccio — Testimonios

   The review cards carry the client's own mark and name instead of a stock
   portrait and a category label.

   The theme sized that slot for a face: a 10.4rem circle, cropped to fill.
   That is the wrong box for a logo. DIOR is 3.6:1 and SONY is 5.7:1, and a
   wordmark contained inside a circle shrinks until the letters are unreadable
   while a square mark like Ridge fills the same circle edge to edge — the two
   would not read as the same size on the same shelf.

   So the slot becomes a bounding box rather than a shape: a fixed height, a
   capped width, and the mark placed inside at its own proportions, flush
   left. Wide wordmarks meet the width first and square marks meet the height
   first, which is what makes a row of unrelated logos look evenly weighted.

   Sizes stay in rem, as the theme states them: main-style.css drives
   html{font-size} off vw, so rem here is already a share of the viewport and
   the plate scales with the card it sits in.
   ========================================================================= */

.section-testimonials .s-inner .testimonials .testimonial .image-wrapper {
  /* shrink to the mark: the figure is the plate, not the column. Left at its
     block default it would run the full width of the card, and the theme's
     loading pulse would flash across all of it while the logo streamed in */
  width: fit-content !important;
  max-width: 24rem;
  height: 7.2rem !important;
  margin-bottom: 2.4rem !important;
  /* the circle was for a cropped face; a logo is not cropped */
  border-radius: 0 !important;
  overflow: visible;
}

.section-testimonials .s-inner .testimonials .testimonial .image-wrapper .image-inner {
  width: auto;
  height: 100%;
}

.section-testimonials .s-inner .testimonials .testimonial .image-wrapper .image {
  width: auto;
  height: 100%;
  max-width: 24rem;
  /* contain, not the theme's cover: a logo may not be cropped to fill */
  object-fit: contain;
  object-position: left center;
}

/* Barebells ships white-on-transparent, drawn for the dark story rail. These
   cards are #eff1f1, so the one file is flipped here rather than carrying a
   second copy of the same mark into the repo. */
.section-testimonials .s-inner .testimonials .testimonial .image--invert {
  filter: invert(1);
}

/* OLS is an opaque tile rather than a transparent mark. Without a corner it
   reads as a photograph nobody finished cropping, sitting beside four clean
   logos. */
.section-testimonials .s-inner .testimonials .testimonial .image--tile {
  border-radius: 1.2rem;
}

/* The card narrows to the viewport under the theme's breakpoint and rem grows
   against a smaller screen, so the plate comes down with it. */
@media (max-width: 1099px) {

  .section-testimonials .s-inner .testimonials .testimonial .image-wrapper {
    max-width: 20rem;
    height: 6.4rem !important;
    margin-bottom: 1.6rem !important;
  }

  .section-testimonials .s-inner .testimonials .testimonial .image-wrapper .image {
    max-width: 20rem;
  }
}

/* En teléfono la tarjeta baja a 2.4rem de relleno (responsive.css, 13), así
   que la placa del logo baja con ella: a 6.4rem de alto ocupaba casi un
   tercio de la tarjeta antes de llegar al nombre. */
@media (max-width: 599px) {

  .section-testimonials .s-inner .testimonials .testimonial .image-wrapper {
    max-width: 15rem;
    height: 4.8rem !important;
    margin-bottom: 1.2rem !important;
  }

  .section-testimonials .s-inner .testimonials .testimonial .image-wrapper .image {
    max-width: 15rem;
  }
}