/* Filekub landing illustrations: fit every responsive breakpoint. */
@media (max-width: 1023px) {
  img[src*="images/landing/filekub-"] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin-left: 0 !important;
  }

  div:has(> img[src*="images/landing/filekub-"]),
  div:has(> div > img[src*="images/landing/filekub-"]) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Compact desktop/tablet landscape: stack hero instead of crushing its image. */
@media (min-width: 1024px) and (max-width: 1279px) {
  div[class~="max-w-7xl"]:has(img[src$="images/landing/filekub-hero.webp"]) {
    display: block !important;
  }

  div[class~="lg:flex-none"]:has(img[src$="images/landing/filekub-hero.webp"]) {
    width: 100% !important;
    max-width: 720px !important;
    margin: 3rem auto 0 !important;
  }

  div:has(> img[src$="images/landing/filekub-hero.webp"]),
  div:has(> div > img[src$="images/landing/filekub-hero.webp"]) {
    width: 100% !important;
    max-width: 720px !important;
    min-width: 0 !important;
  }

  img[src$="images/landing/filekub-hero.webp"] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
}

/* True desktop: keep hero inside its right column. */
@media (min-width: 1280px) {
  img[src$="images/landing/filekub-hero.webp"] {
    width: min(32vw, 680px) !important;
    max-width: min(32vw, 680px) !important;
    height: auto !important;
    margin-left: 0 !important;
  }

  div:has(> img[src$="images/landing/filekub-hero.webp"]),
  div:has(> div > img[src$="images/landing/filekub-hero.webp"]) {
    max-width: min(34vw, 714px) !important;
    min-width: 0 !important;
  }
}

/* Feature screenshots should never exceed their grid column. */
@media (min-width: 1024px) {
  img[src$="images/landing/filekub-upload.webp"],
  img[src$="images/landing/filekub-share.webp"],
  img[src$="images/landing/filekub-preview.webp"] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin-left: 0 !important;
  }
}