/* Scoped backdrop treatment for the three NATHAR market footer stages. */
body>footer.nf .nf-stage {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: 540px;
  padding: 0;
  gap: 0;
  overflow: hidden;
}

body>footer.nf .nf-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

body>footer.nf .nf-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  pointer-events: none;
}

body>footer.nf .nf-art img {
  object-fit: cover;
  object-position: center 54%;
}

body>footer.nf .nf-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  width: min(52%, 680px);
  min-height: 540px;
  padding: 55px 56px 86px;
  background: transparent;
}

body>footer.nf .nf-copy .nf-primary {
  align-self: flex-start;
}

body>footer.nf .nf-copy .nf-edition {
  width: 100%;
}

body>footer.nf .nf-art figcaption {
  position: absolute;
  z-index: 3;
  inset-inline: 0;
  bottom: 0;
  padding: 13px 32px;
  border: 0;
  background: transparent;
  color: inherit;
}

body>footer.nf--live .nf-stage::after {
  background: linear-gradient(270deg, rgba(17, 31, 25, .98) 0%, rgba(17, 31, 25, .91) 31%, rgba(17, 31, 25, .54) 53%, rgba(17, 31, 25, .02) 82%);
}

body>footer.nf--live .nf-art figcaption {
  color: #f4eee1;
  background: rgba(17, 31, 25, .58);
}

body>footer.nf--outlook .nf-stage::after {
  background: linear-gradient(270deg, rgba(245, 237, 220, .97) 0%, rgba(245, 237, 220, .88) 31%, rgba(245, 237, 220, .32) 55%, rgba(245, 237, 220, 0) 79%);
}

body>footer.nf--outlook .nf-art figcaption {
  color: #283027;
  background: rgba(245, 237, 220, .7);
}

body>footer.nf--markets .nf-stage {
  flex-direction: row-reverse;
}

body>footer.nf--markets .nf-stage::after {
  background: linear-gradient(90deg, rgba(243, 230, 203, .98) 0%, rgba(243, 230, 203, .88) 31%, rgba(243, 230, 203, .35) 56%, rgba(243, 230, 203, .02) 82%);
}

body>footer.nf--markets .nf-art figcaption {
  color: #283027;
  background: rgba(243, 230, 203, .72);
}

@media (max-width: 700px) {
  body>footer.nf .nf-stage,
  body>footer.nf--markets .nf-stage {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  body>footer.nf .nf-copy,
  body>footer.nf--markets .nf-copy,
  body>footer.nf--outlook .nf-copy {
    width: 100%;
    min-height: 555px;
    padding: 35px 25px 88px;
  }

  body>footer.nf .nf-art,
  body>footer.nf--markets .nf-art,
  body>footer.nf--outlook .nf-art {
    position: absolute;
    inset: 0;
    height: 100%;
    margin: 0;
    aspect-ratio: auto;
    border-radius: 0;
  }

  body>footer.nf--live .nf-stage::after {
    background: linear-gradient(180deg, rgba(17, 31, 25, .66), rgba(17, 31, 25, .89) 76%);
  }

  body>footer.nf--outlook .nf-stage::after {
    background: linear-gradient(180deg, rgba(245, 237, 220, .78), rgba(245, 237, 220, .96) 76%);
  }

  body>footer.nf--markets .nf-stage::after {
    background: linear-gradient(180deg, rgba(243, 230, 203, .8), rgba(243, 230, 203, .96) 76%);
  }

  body>footer.nf .nf-art img {
    object-position: center center;
  }

  body>footer.nf .nf-art figcaption {
    padding: 11px 20px;
    font-size: 10px;
  }
}