/**
 * Projects page — All Projects card images:
 * full width (edge-to-edge), no uneven cropping on mobile.
 */
.page-id-530 .elementor-element-eec2989 .elementor-widget-image img,
.elementor-530 .elementor-element-eec2989 .elementor-widget-image img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block;
}

.page-id-530 .elementor-element-eec2989 .elementor-widget-image .elementor-widget-container,
.elementor-530 .elementor-element-eec2989 .elementor-widget-image .elementor-widget-container,
.page-id-530 .elementor-element-eec2989 .elementor-widget-image figure,
.elementor-530 .elementor-element-eec2989 .elementor-widget-image figure {
  width: 100%;
  line-height: 0;
}

/**
 * Desktop / tablet (2-col grid): keep all card image areas the same height
 * as the left-side screenshots (Medical Dictation / LAAO ratio ~16:9).
 * Removes Fixafib's slightly taller extra space.
 */
@media (min-width: 768px) {
  .page-id-530 .elementor-element-eec2989 .elementor-widget-image,
  .elementor-530 .elementor-element-eec2989 .elementor-widget-image {
    aspect-ratio: 2560 / 1443;
    overflow: hidden;
    width: 100%;
  }

  .page-id-530 .elementor-element-eec2989 .elementor-widget-image .elementor-widget-container,
  .elementor-530 .elementor-element-eec2989 .elementor-widget-image .elementor-widget-container,
  .page-id-530 .elementor-element-eec2989 .elementor-widget-image figure,
  .elementor-530 .elementor-element-eec2989 .elementor-widget-image figure {
    height: 100%;
  }

  .page-id-530 .elementor-element-eec2989 .elementor-widget-image img,
  .elementor-530 .elementor-element-eec2989 .elementor-widget-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
  }
}

/**
 * Mobile (<768px): Elementor grid used equal 1fr rows, which forced
 * equal card heights and made text overflow/overlap images.
 * Let each card size to its content in a clean vertical stack.
 */
@media (max-width: 767px) {
  .page-id-530 .elementor-element-eec2989,
  .elementor-530 .elementor-element-eec2989 {
    --e-con-grid-template-columns: 1fr !important;
    --e-con-grid-template-rows: none !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    grid-auto-rows: auto !important;
    align-items: start !important;
  }

  .page-id-530 .elementor-element-eec2989 > .e-con,
  .elementor-530 .elementor-element-eec2989 > .e-con {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .page-id-530 .elementor-element-eec2989 > .e-con > .elementor-widget-image,
  .elementor-530 .elementor-element-eec2989 > .e-con > .elementor-widget-image {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    z-index: 0;
    margin: 0 !important;
    aspect-ratio: auto;
    overflow: visible;
  }

  .page-id-530 .elementor-element-eec2989 > .e-con > .e-con,
  .elementor-530 .elementor-element-eec2989 > .e-con > .e-con {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    z-index: 1;
    margin-top: 0 !important;
    overflow: visible !important;
  }

  .page-id-530 .elementor-element-eec2989 .elementor-widget-image img,
  .elementor-530 .elementor-element-eec2989 .elementor-widget-image img {
    height: auto !important;
    object-fit: contain !important;
  }
}