/* MARK IT YOUR WAY — seamless imagery blend (no layout changes) */

/* The photograph background is now color-matched to the section cream,
   so no blend mode is needed (multiply was dulling the products). */
.dartee-home .marksec__media img,
.dartee-home .marksec figure img {
  mix-blend-mode: normal !important;
  filter: none !important;
  background: transparent !important;
}

/* No frame, no card, no container edge */
.dartee-home .marksec__media {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.dartee-home .marksec__media::before,
.dartee-home .marksec__media::after { display: none !important; }

/* Wide, extremely soft feather on all four edges so the rectangle vanishes */
.dartee-home .marksec__media img {
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.25) 6%, rgba(0,0,0,.7) 12%, #000 20%, #000 80%, rgba(0,0,0,.7) 88%, rgba(0,0,0,.25) 94%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.25) 6%, rgba(0,0,0,.7) 12%, #000 20%, #000 80%, rgba(0,0,0,.7) 88%, rgba(0,0,0,.25) 94%, transparent 100%);
  mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.25) 6%, rgba(0,0,0,.7) 12%, #000 20%, #000 80%, rgba(0,0,0,.7) 88%, rgba(0,0,0,.25) 94%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.25) 6%, rgba(0,0,0,.7) 12%, #000 20%, #000 80%, rgba(0,0,0,.7) 88%, rgba(0,0,0,.25) 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

@media (max-width: 767px) {
  .dartee-home .marksec__media img {
    -webkit-mask-image:
      linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 3%, #000 9%, #000 91%, rgba(0,0,0,.35) 97%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.35) 3%, #000 9%, #000 91%, rgba(0,0,0,.35) 97%, transparent 100%);
    mask-image:
      linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 3%, #000 9%, #000 91%, rgba(0,0,0,.35) 97%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.35) 3%, #000 9%, #000 91%, rgba(0,0,0,.35) 97%, transparent 100%);
  }
}