.main-body {
  position: relative;
  z-index: 1;
}
.content {
  position: relative;
  z-index: 1;
}
.triangle {
  position: absolute;
  mix-blend-mode: multiply;
  transform: rotate(90deg);
}
.triangle.md {
  opacity: 0.75;
  z-index: 1;
}
.collage3 .image-footnote {
  filter: drop-shadow(0px 1px 3px var(--oldLace));

}
.gradient {
  position: absolute;
  bottom: 0;
  width: 100%;
  mix-blend-mode: multiply;
}
.clearfix {
  clear: both;
}
/* .pager {
  position: absolute;
  bottom: 0;
} */

@media (min-width: 1200px) {
  .main-body {
    /* background-size: 67.96875vw; */
    margin-top: -17.5vw;
  }
  .spacer {
    margin-top: 24vw;
  }
  .header {
    margin-top: -3rem;
    left: -5.5rem;
  }
  .collage1 {
    width: 58.854166666666664vw;
    height: 70.40104166666666vw;
    float: right;
    clear: right;
    shape-outside: polygon(18% 0%, 100% 0%, 100% 100%, 24.5% 100%, 24.5% 89.5%, 0% 89.5%, 18% 64.5%) border-box;
    shape-margin: 1.5rem;
    margin-left: 1.5rem;
    margin-right: -50%;
  }
  .collage1 img.w-100 {
    width: 127.5% !important;
  }
  .collage1 .image-container {
    margin-top: 16.510416666666668vw;
  }
  .collage1 .image-footnote {
    width: 35%;
  }
  .poster {
    width: 16.614583333333332vw;
    float: right;
    clear: right;
    margin-top: -5.833333333333333vw;
    margin-right: calc(-50% + 60px);
  }
  .collage2 {
    width: 53vw;
    height: 65.64687500000001vw;
    float: left;
    shape-outside: polygon(0% 0%, 42.5% 0%, 54.5% 16%, 60.5% 16%, 100% 69%, 71% 69%, 49% 100%, 0% 100%) border-box;
    shape-margin: 1.5rem;
    margin-right: 1.5rem;
    margin-left: -50%;
  }
  .collage2 .image-container {
    margin-top: calc(-40.677083333333336vw + 60px);
  }
  .collage2 .image-footnote {
    width: 30%;
  }
  .collage3 {
    width: 42vw;
    height: 31.025vw;
    float: right;
    shape-outside: polygon(43% 0%, 100% 0%, 100% 100%, 0% 100%) border-box;
    shape-margin: 1.5rem;
    margin-right: -50%;
    margin-top: 10.5vw;
    margin-bottom: 5rem;
    margin-left: 1.5rem !important;
  }
  .collage3 .image-container {
    margin-top: 60px;
  }
  .collage3 .image-footnote {
    width: 55%;
    margin-top: -2.5rem;
    margin-left: 60px;
  }
  .pacifists {
    width: 67.96875vw;
    margin-top: -35vw;
    opacity: .30;
  }
  .pager {
    margin-top: -3rem;
  }
  .prevPage .back-arrow, .nextPage .forward-arrow {
    border-color: var(--mdGray);
  }
  .prevPage .button-text span:first-child,
  .nextPage .button-text span:first-child {
    color: var(--mdGray);
  }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .main-body {
    background-size: 125%;
    margin-top: -18vw;
  }
  .spacer {
    margin-top: 32vw;
  }
  .header {
    margin-top: -2rem;
    left: -3.5rem;
  }
  .collage1 {
    width: 65.625vw;
    height: 76.5625vw;
    float: right;
    clear: right;
    shape-outside: polygon(18% 0%, 100% 0%, 100% 95%, 25% 95%, 29% 89%, 0% 89%, 18% 64%) border-box;
    shape-margin: 1.5rem;
    margin-left: 1.5rem;
    margin-right: -8.333333333vw;
  }
  .collage1 img.w-100 {
    width: 124% !important;
  }
  .collage1 .image-container {
    /* margin-top: calc(28.385416666666668vw + 60px); */
    margin-top: 28.385416666666668vw;
  }
  .collage1 .image-footnote {
    width: 55%;
    /* margin-top: -2.5rem;
    margin-right: 60px; */
  }
  .poster {
    width: 26.302083333333332vw;
    float: right;
    clear: right;
    margin-top: -7.161458333333333vw;
    margin-right: calc(-8.333333333vw + 60px);
    margin-left: 1.5rem;
    /* margin-bottom: calc(60px + 1.5rem) */
    margin-bottom: 1.5rem; /* calc(112px + 1.5rem); */
  }
  .collage2 {
    margin-left: -16.66666666vw;
    margin-right: -8.333333333vw;
    margin-bottom: 1rem;
  }
  .collage2 img.w-100 {
    width: 92.5% !important;
    margin-left: 5%;
  }
  .collage2 .image-container {
    margin-top: calc(-35.67708333333333vw + 60px);
  }
  .collage2 .image-footnote {
    width: 35%;
    margin-top: -2.5rem;
    margin-right: 60px;
  }
  .collage3 {
    width: 74.21875vw;
  }
  .collage3 .image-container {
    margin-top: 60px;
  }
  .collage3 .image-footnote {
    margin-top: -2.5rem;
    margin-right: 60px;
  }
  .triangle.md {
    width: 31vw;
    top: 1vw;
    left: 1vw;
  }
  .gradient {
    height: 40vw; 
    /* background: transparent linear-gradient(0deg, var(--darkLiver) 25%, #FFFFFF00 100%) 0% 0% no-repeat padding-box; */
    background: transparent linear-gradient(0deg, #000000FF 0%, #FFFFFF00 100%) 0% 0% no-repeat padding-box;
  }
  .pacifists {
    margin-top: -50vw;
    opacity: .30;
  }
  .pacifists img.w-100 {
    width: 125% !important;
    margin-left: -25%;
  }
}

@media (max-width: 1199.98px) {
  /* .prevPage .button-text span:last-child,
  .nextPage .button-text span:last-child,
  .prevPage .back-arrow i,
  .nextPage .forward-arrow i {
    color: var(--white);
    filter: drop-shadow(0 0 10px var(--dkGray));
  }
  .prevPage .back-arrow, .nextPage .forward-arrow {
    border-color: var(--white);
  }
  .prevPage .button-text span:first-child,
  .nextPage .button-text span:first-child {
    color: var(--white);
  } */
}

@media (max-width: 767.98px) {
  .page-title h1 {
    letter-spacing: -1px;
  }
  .spacer {
    margin-top: 3rem;
  }
  .collage1 img.w-100 {
    width: 125% !important;
    margin-left: -10%;
  }
  .collage2 img.w-100 {
    width: 146.5% !important;
    margin-left: -20%;
  }
  .collage3 img.w-100 {
    width: 97.5% !important;
    margin-left: 2.5%;
  }
  /* .collage3 .image-container {
    margin-top: 60px;
  } */
  /* .collage3 .image-footnote {
    margin-top: -2.5rem;
    margin-right: 60px;
  } */
  .triangle.md {
    width: 35vw;
    top: -19vw;
    left: 3vw;
  }
  .gradient {
    height: 100vw; 
    /* background: transparent linear-gradient(0deg, var(--darkLiver) 25%, #FFFFFF00 100%) 0% 0% no-repeat padding-box; */
    background: transparent linear-gradient(0deg, #000000FF 10%, #FFFFFF00 100%) 0% 0% no-repeat padding-box;
  }
  .pacifists {
    margin-top: -63vw;
    opacity: .35;
  }
  .pacifists img.w-100 {
    width: 250% !important;
    margin-left: -85%;
  }
}

/* Safari Shape Outside Fix */
.safix {
  animation: safix 3s infinite;
}
@keyframes safix {
  10% {
     text-indent: .01px;
  }
}