/* The approved portrait follows the story column without adding page height. */
@layer mobile-review-important {
  html:root body.sala[data-mirada-fusion] #contenido .esencia-reticula {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "text" "portrait" "places" "more" !important;
    grid-template-rows: auto !important;
    gap: 24px !important;
    align-items: start !important;
  }

  html:root body.sala[data-mirada-fusion] #contenido .esencia-apertura-grid {
    display: contents !important;
  }

  html:root body.sala[data-mirada-fusion] #contenido .esencia-apertura-texto {
    grid-area: text !important;
    min-width: 0 !important;
  }

  html:root body.sala[data-mirada-fusion] #contenido .esencia-places {
    grid-area: places !important;
    width: 100% !important;
    max-width: 560px !important;
  }

  html:root body.sala[data-mirada-fusion] #contenido .esencia-language-strip {
    grid-area: languages !important;
    margin: 0 !important;
    min-width: 0 !important;
  }

  html:root body.sala[data-mirada-fusion] #contenido .esencia-more {
    grid-area: more !important;
    margin: 0 !important;
    min-width: 0 !important;
  }

  html:root body.sala[data-mirada-fusion] #contenido .esencia-values > .fuera {
    margin-block-start: 32px !important;
  }


  html:root body.sala[data-mirada-fusion] #contenido .esencia-ilustracion {
    grid-area: portrait !important;
    position: relative !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 220px !important;
    width: 100% !important;
    margin: 0 !important;
    background: transparent !important;
    align-self: stretch !important;
    justify-self: stretch !important;
  }

  html:root body.sala[data-mirada-fusion] #contenido .esencia-ilustracion img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    object-fit: contain !important;
    object-position: center top !important;
    mix-blend-mode: multiply !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0, #000 7%, #000 90%, transparent 100%) !important;
    mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0, #000 7%, #000 90%, transparent 100%) !important;
    -webkit-mask-composite: source-in !important;
    mask-composite: intersect !important;
  }

  @media (min-width: 768px) and (max-width: 1000px) {
    html:root body.sala[data-mirada-fusion] #contenido .esencia-ilustracion {
      height: 360px !important;
    }
  }

  @media (min-width: 768px) {
    html:root body.sala[data-mirada-fusion] #contenido .esencia-values .fuera-lista {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      grid-auto-flow: row !important;
    }

    html:root body.sala[data-mirada-fusion] #contenido .esencia-values .fuera-lista > li:first-child {
      grid-column: 1 !important;
      grid-row: 1 / span 2 !important;
    }

    html:root body.sala[data-mirada-fusion] #contenido .esencia-values .fuera-lista > li:not(:first-child) {
      grid-column: auto !important;
      grid-row: auto !important;
    }
  }

  @media (min-width: 1001px) {
    html:root body.sala[data-mirada-fusion] #contenido .esencia-reticula {
      grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr) !important;
      grid-template-areas: "text portrait" "places portrait" "more portrait" !important;
      grid-template-rows: auto auto auto !important;
      column-gap: clamp(28px, 3vw, 44px) !important;
      row-gap: 24px !important;
    }

    html:root body.sala[data-mirada-fusion] #contenido .esencia-ilustracion {
      height: auto !important;
      isolation: auto !important;
    }

    html:root body.sala[data-mirada-fusion] #contenido .esencia-ilustracion img {
      inset: 0 auto auto 50% !important;
      width: auto !important;
      height: auto !important;
      max-width: 100% !important;
      max-height: 100% !important;
      transform: translateX(-50%) !important;
    }

    html:root body.sala[data-mirada-fusion] #contenido .esencia-places {
      justify-self: start !important;
      margin: 0 !important;
    }

    html:root body.sala[data-mirada-fusion] #contenido .esencia-more .esencia-cierre-grid {
      grid-template-columns: minmax(0, 1fr) !important;
      gap: 24px !important;
    }
  }
}