/* ==========================================
   TUCHOK — SISTEMA ÚNICO DE MÁSCARA
========================================== */

.sustainability-photo {
  position: absolute;
  inset: 0;
  z-index: 0;

  overflow: hidden;
  pointer-events: none;

  -webkit-mask-image:
    url("../svg/sustainability-mask.svg");

  mask-image:
    url("../svg/sustainability-mask.svg");

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-size:
    var(--mask-desktop-size, 118%) auto;

  mask-size:
    var(--mask-desktop-size, 118%) auto;

  -webkit-mask-position:
    var(--mask-desktop-left, 50%)
    var(--mask-desktop-top, -360px);

  mask-position:
    var(--mask-desktop-left, 50%)
    var(--mask-desktop-top, -360px);
}

/* FOTOGRAFÍA FIJA */

.sustainability-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  max-width: none;
}

/* TRATAMIENTO DE LA FOTOGRAFÍA */

.sustainability-photo-shade {
  position: absolute;
  inset: 0;

  background: linear-gradient(
    90deg,
    rgba(8, 22, 6, 0.67),
    rgba(8, 22, 6, 0.15) 55%,
    rgba(7, 15, 3, 0.38)
  );
}

/* EL CONTENIDO DEBE ESTAR POR ENCIMA */

.sustainability-container {
  position: relative;
  z-index: 2;
}

/* TABLET */

@media (max-width: 1024px) and (min-width: 768px) {
  .sustainability-photo {
    -webkit-mask-size: 135% auto;
    mask-size: 135% auto;

    -webkit-mask-position: 50% -240px;
    mask-position: 50% -240px;
  }
}

/* MÓVIL */

@media (max-width: 767px) {
  .sustainability-photo {
    -webkit-mask-size:
      var(--mask-mobile-size, 205%) auto;

    mask-size:
      var(--mask-mobile-size, 205%) auto;

    -webkit-mask-position:
      var(--mask-mobile-left, 56%)
      var(--mask-mobile-top, -180px);

    mask-position:
      var(--mask-mobile-left, 56%)
      var(--mask-mobile-top, -180px);
  }

  .sustainability-image {
    object-position: 62% center;
  }
}