/*
 * Image with pattern (16:9) — SD-72
 * Figma: content modules / img with pattern (node 6403-66633)
 * 16:9 image in the foreground; decorative brand pattern offset diagonally
 * behind it so it peeks out at two corners.
 */

.dk-img-pattern {
  position: relative;
  display: block;
  inline-size: 100%;
  /* spacing-07 = 40px at L — pattern peeks out top + both sides */
  --dk-img-pattern-offset: var(--dk-space-07);
  padding-block-start: var(--dk-img-pattern-offset);
  padding-inline: var(--dk-img-pattern-offset);
}

.dk-img-pattern-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.dk-img-pattern-bg img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.dk-img-pattern-fg {
  position: relative;
  z-index: 1;
}

/* Pattern-only (no foreground image): full 16:9 fill, no offset peek */
.dk-img-pattern--only {
  padding: 0;
}

/* At ≤700px Figma reduces pattern offset to 20px (M token only kicks in at ≤375px) */
@media (max-width: 700px) {
  .dk-img-pattern {
    --dk-img-pattern-offset: 1.25rem; /* 20px */
  }
}