/* Creative & Design page — the 5-card service grid ([clx_cd_services_grid]).
   Inherits the base .svc-cards-grid (1fr 1fr 360px) from clx-cost-curves.css,
   which is enqueued on this page. The third column holds the partner-logo
   aside on row 1; cards fill rows 1+2 in cols 1+2 (and col 3 of row 2).

   Layout target:
     row 1: UX Audits | UX Design | aside (logos + banner)
     row 2: Product Prototyping | Web Design | AI Video Production

   No per-page grid-template-columns override needed — the base 1fr 1fr 360px
   is the desired layout. Responsive breakpoints below collapse the third
   column on narrower viewports. */

@media (max-width: 1024px) {
  .svc-cards-grid.svc-cards-grid--cd { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .svc-cards-grid.svc-cards-grid--cd { grid-template-columns: 1fr; }
}

/* CD-specific badge tiles (UX Design Awards 2024 + Clutch). Both
   images are ~1.34 aspect (matches the 170×128 tile ≈ 1.33) so they
   fill edge-to-edge with no internal padding. Scoped to --cd so the
   base partner-logo treatment on other pages stays unchanged. */
.svc-cards-grid.svc-cards-grid--cd .clx-logo-tile:has(img[src*="DesignAwards2024"]),
.svc-cards-grid.svc-cards-grid--cd .clx-logo-tile:has(img[src*="DesignDeliveryBadge"]),
.svc-cards-grid.svc-cards-grid--cd .clx-logo-tile:has(img[src*="FeaturedProjects"]),
.svc-cards-grid.svc-cards-grid--cd .clx-logo-tile:has(img[src*="CSSDesignAwards"]),
.svc-cards-grid.svc-cards-grid--cd .clx-logo-tile:has(img[src*="ASPartner"]),
.svc-cards-grid.svc-cards-grid--cd .clx-logo-tile:has(img[src*="WebDesignMention"]) {
  padding: 0;
  background: transparent;
}
.svc-cards-grid.svc-cards-grid--cd .clx-logo-tile img[src*="DesignAwards2024"],
.svc-cards-grid.svc-cards-grid--cd .clx-logo-tile img[src*="DesignDeliveryBadge"],
.svc-cards-grid.svc-cards-grid--cd .clx-logo-tile img[src*="FeaturedProjects"],
.svc-cards-grid.svc-cards-grid--cd .clx-logo-tile img[src*="CSSDesignAwards"],
.svc-cards-grid.svc-cards-grid--cd .clx-logo-tile img[src*="ASPartner"],
.svc-cards-grid.svc-cards-grid--cd .clx-logo-tile img[src*="WebDesignMention"] {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
  padding: 0;
}