/* Quiet object collages: the lower edge is left open for the largest drawing. */
.era-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-bottom: 104px;
}

.era-story,
.era-quickfacts {
  position: relative;
  z-index: 1;
}

.era-story p,
.era-fact p {
  color: #5c574e;
}

.era-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.era-backdrop-object {
  position: absolute;
  display: block;
  width: var(--object-width, 240px);
  opacity: var(--object-opacity, .08);
  transform: rotate(var(--object-rotation, 0deg));
  transform-origin: center;
  filter: grayscale(.65) sepia(.3);
}

.era-backdrop-object > .object-illustration {
  display: block;
  width: 100%;
  height: auto;
}

.era-backdrop--ussr .era-backdrop-object--phone {
  right: -46px;
  bottom: -68px;
  --object-width: 450px;
  --object-opacity: .13;
  --object-rotation: -12deg;
}
.era-backdrop--ussr .era-backdrop-object--projector {
  right: 22px;
  top: 8px;
  --object-width: 220px;
  --object-opacity: .075;
  --object-rotation: 11deg;
}
.era-backdrop--ussr .era-backdrop-object--typewriter {
  left: 20%;
  bottom: -72px;
  --object-width: 315px;
  --object-opacity: .075;
  --object-rotation: 9deg;
}
.era-backdrop--ussr .era-backdrop-object--camera {
  left: -78px;
  top: 80px;
  --object-width: 220px;
  --object-opacity: .07;
  --object-rotation: -18deg;
}

.era-backdrop--nineties .era-backdrop-object--boombox {
  right: -62px;
  bottom: -65px;
  --object-width: 480px;
  --object-opacity: .13;
  --object-rotation: -8deg;
}
.era-backdrop--nineties .era-backdrop-object--cassette {
  left: 25px;
  bottom: -31px;
  --object-width: 265px;
  --object-opacity: .10;
  --object-rotation: -16deg;
}
.era-backdrop--nineties .era-backdrop-object--vhs {
  right: 29px;
  top: 28px;
  --object-width: 230px;
  --object-opacity: .075;
  --object-rotation: 16deg;
}

.era-backdrop--noughties .era-backdrop-object--computer {
  right: -65px;
  bottom: -94px;
  --object-width: 470px;
  --object-opacity: .13;
  --object-rotation: -8deg;
}
.era-backdrop--noughties .era-backdrop-object--mobile {
  right: 36px;
  top: 7px;
  --object-width: 185px;
  --object-opacity: .075;
  --object-rotation: 17deg;
}
.era-backdrop--noughties .era-backdrop-object--cd {
  left: 15%;
  bottom: -75px;
  --object-width: 290px;
  --object-opacity: .10;
  --object-rotation: -13deg;
}
.era-backdrop--noughties .era-backdrop-object--usb {
  left: -75px;
  top: 170px;
  --object-width: 225px;
  --object-opacity: .08;
  --object-rotation: -28deg;
}

@media (max-width: 900px) {
  .era-panel {
    padding-bottom: 86px;
  }
  .era-backdrop--ussr .era-backdrop-object--phone,
  .era-backdrop--nineties .era-backdrop-object--boombox,
  .era-backdrop--noughties .era-backdrop-object--computer {
    right: -48px;
    bottom: -42px;
    --object-width: 310px;
    --object-opacity: .11;
  }
  .era-backdrop--ussr .era-backdrop-object--camera {
    left: -74px;
    top: 138px;
    --object-width: 175px;
  }
  .era-backdrop--ussr .era-backdrop-object--projector,
  .era-backdrop--nineties .era-backdrop-object--vhs,
  .era-backdrop--noughties .era-backdrop-object--mobile {
    right: -35px;
    top: 40px;
    --object-width: 180px;
    --object-opacity: .07;
  }
  .era-backdrop--ussr .era-backdrop-object--typewriter,
  .era-backdrop--nineties .era-backdrop-object--cassette,
  .era-backdrop--noughties .era-backdrop-object--cd {
    left: -38px;
    bottom: -35px;
    --object-width: 210px;
    --object-opacity: .07;
  }
  .era-backdrop--noughties .era-backdrop-object--usb {
    left: -68px;
    top: 220px;
    --object-width: 180px;
    --object-opacity: .07;
  }
}

@media (max-width: 480px) {
  .era-backdrop--ussr .era-backdrop-object--phone,
  .era-backdrop--nineties .era-backdrop-object--boombox,
  .era-backdrop--noughties .era-backdrop-object--computer {
    right: -42px;
    bottom: -24px;
    --object-width: 255px;
  }
  .era-backdrop--ussr .era-backdrop-object--typewriter,
  .era-backdrop--nineties .era-backdrop-object--cassette,
  .era-backdrop--noughties .era-backdrop-object--cd {
    left: -55px;
    --object-width: 185px;
  }
}

@media print {
  .era-backdrop {
    display: none;
  }
  .era-panel {
    padding-bottom: 0;
  }
}