/* Fix for teaser images */
.node--view-mode-teaser .tw-relative.tw-h-48 .tw-absolute img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Override Tailwind prose margins for images in teasers */
.sm\:tw-prose-base :where(.node--view-mode-teaser img):not(:where([class~="tw-not-prose"], [class~="tw-not-prose"] *)),
.tw-prose :where(.node--view-mode-teaser img):not(:where([class~="tw-not-prose"], [class~="tw-not-prose"] *)),
.node--view-mode-teaser img {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Make sure the image container takes the correct shape */
.node--view-mode-teaser .tw-relative.tw-h-48 {
  min-height: 12rem;
  overflow: hidden;
}

/* Fix rounded corners for the image container */
.node--view-mode-teaser {
  overflow: hidden;
}

/* Image container should have rounded left corners on desktop */
@media (min-width: 768px) {
  .node--view-mode-teaser .tw-relative.tw-h-48 {
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
  }

  /* Handle overflow properly */
  .node--view-mode-teaser .tw-absolute {
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
    overflow: hidden;
  }
}

/* On mobile (stacked layout) the image should have top rounded corners */
@media (max-width: 767px) {
  .node--view-mode-teaser .tw-relative.tw-h-48 {
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
  }

  /* Handle overflow properly */
  .node--view-mode-teaser .tw-absolute {
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    overflow: hidden;
  }
}

/* Image wrapper from Drupal should not constrain the image */
.node--view-mode-teaser .field--name-field-image {
  height: 100%;
}

.node--view-mode-teaser .field--name-field-image img {
  display: block;
  max-width: none;
  width: 100%;
  height: 100%;
}

/* Fix empty space issues */
.node--view-mode-teaser .field--name-field-image .field__item,
.node--view-mode-teaser .field--name-field-image .field__items {
  height: 100%;
}