/*
 * MAUTO Home card alignment v370
 * Equal card geometry and optical artwork baselines for desktop and tablet.
 */

:root {
  --mauto-road-alert-red: #e52235;
}

/* Every primary ecosystem button uses the same height within its profile. */
.mauto-home-runtime .device-shell[data-device="desktop"] .ecosystem .cards > :is(
  #c1, #c2, #c3, #c4, #c5, #c6, #c7, #c8
) {
  height: 270px !important;
  min-height: 270px !important;
}

.mauto-home-runtime .device-shell[data-device="tablet"] .ecosystem .cards > :is(
  #c1, #c2, #c3, #c4, #c5, #c6, #c7, #c8
) {
  height: 214px !important;
  min-height: 214px !important;
}

/* Override the legacy two-ID selectors that enlarged only the final row. */
.mauto-home-runtime .device-shell[data-device="tablet"] .ecosystem .cards > a#c7:not(#c9),
.mauto-home-runtime .device-shell[data-device="tablet"] .ecosystem .cards > a#c8:not(#c9) {
  height: 214px !important;
  min-height: 214px !important;
}

/* Preserve the approved Tuning / Driving-school art frame for every card. */
.mauto-home-runtime .device-shell[data-device="desktop"] .ecosystem .cards > :is(
  #c1, #c2, #c3, #c4, #c5, #c6, #c7, #c8
) > img {
  left: 9px !important;
  right: 9px !important;
  bottom: 3px !important;
  width: calc(100% - 18px) !important;
  height: 188px !important;
  object-fit: contain !important;
  object-position: center bottom !important;
}

.mauto-home-runtime .device-shell[data-device="tablet"] .ecosystem .cards > :is(
  #c1, #c2, #c3, #c4, #c5, #c6, #c7, #c8
) > img {
  left: 7px !important;
  right: 7px !important;
  bottom: 1px !important;
  width: calc(100% - 14px) !important;
  height: 150px !important;
  object-fit: contain !important;
  object-position: center bottom !important;
}

/* These two source cutouts contain extra transparent space. Optical scaling
   makes their visible objects match the Tuning / Driving-school baseline. */
.mauto-home-runtime :is(
  .device-shell[data-device="desktop"],
  .device-shell[data-device="tablet"]
) .ecosystem .cards > #c5 > img {
  transform: scale(1.21) !important;
  transform-origin: center top !important;
}

.mauto-home-runtime .device-shell[data-device="desktop"] .ecosystem .cards > #c7 > img {
  transform: translateY(-26px) scale(1.265) !important;
  transform-origin: center top !important;
}

.mauto-home-runtime .device-shell[data-device="tablet"] .ecosystem .cards > #c7 > img {
  transform: translateY(-21px) scale(1.265) !important;
  transform-origin: center top !important;
}

/* Roadside Assistance follows the concise mobile language on larger screens. */
.mauto-home-runtime :is(
  .device-shell[data-device="desktop"],
  .device-shell[data-device="tablet"]
) .ecosystem .cards > :is(#c9, .c9) > :is(strong, .card-category-icon) {
  color: var(--mauto-road-alert-red) !important;
}

.mauto-home-runtime :is(
  .device-shell[data-device="desktop"],
  .device-shell[data-device="tablet"]
) .ecosystem .cards > :is(#c9, .c9) > .card-category-icon {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.mauto-home-runtime :is(
  .device-shell[data-device="desktop"],
  .device-shell[data-device="tablet"]
) .ecosystem .cards > :is(#c9, .c9) > :is(.card-features, b) {
  display: none !important;
}

.mauto-home-runtime :is(
  .device-shell[data-device="desktop"],
  .device-shell[data-device="tablet"]
) .ecosystem .cards > :is(#c9, .c9) > img {
  opacity: 1 !important;
  clip-path: inset(0 0 12% 0) !important;
  object-fit: contain !important;
  object-position: right bottom !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  transform: none !important;
}