/* ==========================================================================
   Image banner no content — mobile first (valori Figma × --figma-px)
   ========================================================================== */

.image-banner-no-content {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.image-banner-no-content__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.image-banner-no-content__link:focus-visible {
  outline: calc(var(--figma-px) * 3) solid var(--color-nolves-blue);
  outline-offset: calc(var(--figma-px) * 2);
}

.image-banner-no-content__media {
  display: block;
  line-height: 0;
}

.image-banner-no-content__image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  background-color: var(--color-border-gray);
}

.image-banner-no-content__image--desktop {
  display: none;
}

.image-banner-no-content--color-bg {
  min-height: calc(var(--figma-px) * 320);
}

.image-banner-no-content__media--color {
  min-height: inherit;
  background-color: var(--image-banner-no-content-bg, var(--color-nolves-blue));
}

.image-banner-no-content__placeholder {
  margin: 0;
  padding-block: calc(var(--figma-px) * 52);
  font-family: var(--font-body);
  font-size: min(32px, 4.571vw);
  font-size: calc(var(--figma-px) * 32);
  line-height: calc(var(--figma-px) * 41.6);
  color: var(--color-oxford-blue);
}

/* Desktop — min-width 768px
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  .image-banner-no-content {
    box-shadow: none;
  }

  .image-banner-no-content--color-bg {
    min-height: 320px;
  }

  .image-banner-no-content__image--mobile {
    display: none;
  }

  .image-banner-no-content__image--desktop {
    display: block;
  }

  .image-banner-no-content__placeholder {
    padding-block: 52px;
    font-size: var(--fs-body-desktop);
    line-height: var(--lh-body-desktop);
  }
}