/* --- Stack core --- */

html.js .swop22-stack-2-frames.section-lock {
  height: 300vh;
}

html.js .swop22-stack-6-frames.section-lock {
  height: 700vh;
}

html.js .swop22-stack-7-frames.section-lock {
  height: 800vh;
}

html.js .swop22-stack-stick {
  /* Same as navbar height. */
  padding-top: 52px;
}

@media all and (min-width: 1000px) {
  html.js .swop22-stack-stick {
    /* Same as navbar height. */
    padding-top: 70px;
  }
}

html.js .swop22-stack-stick-inner {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.swop22-stack-frame {
  width: 100%;
  height: 100vh;
  position: relative;
}

/* When js is one, frame takes full viewport width */
/* and full viewport height minus navbar height. */
html.js .swop22-stack-frame {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: top 0.2s;
}

.swop22-stack .swop22-sharelink a {
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 15px 15px rgba(255, 255, 255, 0.6);
  position: absolute;
  right: 18px;
  top: 18px;
  z-index: 20;
}

@media all and (min-width: 640px) {
  .swop22-stack .swop22-sharelink a {
    right: 24px;
    top: 24px;
  }
}

@media all and (min-width: 900px) {
  .swop22-stack .swop22-sharelink a {
    right: 36px;
    top: 36px;
  }
}

/* --- Frame elements --- */

.swop22-stack-frame-text,
.swop22-stack-frame-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.swop22-stack-frame-text {
  position: relative;
  z-index: 2;
}

.swop22-stack-frame-text p {
  margin: 0 auto;
  width: 70%;
  font-size: 18px;
  line-height: 26px;
  letter-spacing: 1px;
  text-align: center;
}

.swop22-stack-frame-white .swop22-stack-frame-text p {
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.swop22-stack-frame-black .swop22-stack-frame-text p {
  color: #000;
  text-shadow: 0 2px 10px rgba(255, 255, 255, 1);
}

.swop22-stack-frame-img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  font-size: 0;
  background: top right no-repeat;
  background-size: auto 100%;
}

.swop22-stack-frame-img-inner {
  width: 100%;
  height: 100%;
}

.swop22-stack-frame-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media all and (min-width: 768px) {
  .swop22-stack-frame-text p {
    font-size: 20px;
    line-height: 28px;
  }
}

/* --- Stack Backgrounds --- */

.swop22-stack-photos .swop22-stack-stick-inner,
.swop22-stack-photos-alt .swop22-stack-stick-inner {
  background: url(images/bg-left-bottom.png) left bottom no-repeat, url(images/bg-right-top.png) right top no-repeat;
  background-size: auto 50%;
}

/* --- 'Covers' stack type --- */

.swop22-stack-covers .swop22-stack-frame-white {
  background: #090909;
}

.swop22-stack-covers .swop22-stack-frame-black {
  background: #fff;
}

.swop22-stack-covers .swop22-stack-frame-text p {
  max-width: 600px;
}

.swop22-stack-covers .swop22-stack-frame-img-inner {
  visibility: hidden;
  opacity: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

@media all and (min-width: 768px) {
  .swop22-stack-covers .swop22-stack-frame-text p {
    font-size: 22px;
    line-height: 32px;
    letter-spacing: 1.72px;
  }
}

/* --- 'Photos' stack type --- */

.swop22-stack-photos .swop22-stack-frame-text p {
  max-width: 470px;
}

@media all and (max-width: 360px) {
  .swop22-es .swop22-stack-photos .swop22-stack-frame-text p,
  .swop22-fr .swop22-stack-photos .swop22-stack-frame-text p {
    font-size: 13px;
    line-height: 17px;
  }
}

@media all and (max-width: 767px) {
  .swop22-stack-photos .swop22-stack-frame-img-inner {
    height: 100vw;
  }
}

/* Photos positioning */

.swop22-stack-photos .swop22-stack-frame-1 .swop22-stack-frame-img-inner {
  padding: 4%;
}

.swop22-stack-photos .swop22-stack-frame-2 .swop22-stack-frame-img-inner {
  padding: 7% 2% 7% 6%;
}

.swop22-stack-photos .swop22-stack-frame-3 .swop22-stack-frame-img-inner {
  padding: 8% 6% 6% 2%;
}

.swop22-stack-photos .swop22-stack-frame-4 .swop22-stack-frame-img-inner {
  padding: 6% 5% 8% 3%;
}

.swop22-stack-photos .swop22-stack-frame-5 .swop22-stack-frame-img-inner {
  padding: 7% 2% 7% 6%;
}

.swop22-stack-photos .swop22-stack-frame-6 .swop22-stack-frame-img-inner {
  padding: 4%;
}

@media all and (min-width: 768px) {
  .swop22-stack-photos .swop22-stack-frame-1 .swop22-stack-frame-img-inner {
    padding: 2%;
  }

  .swop22-stack-photos .swop22-stack-frame-2 .swop22-stack-frame-img-inner {
    padding: 7% 1% 7% 3%;
  }

  .swop22-stack-photos .swop22-stack-frame-3 .swop22-stack-frame-img-inner {
    padding: 4% 2%;
  }

  .swop22-stack-photos .swop22-stack-frame-4 .swop22-stack-frame-img-inner {
    padding: 6% 2.5% 8% 1.5%;
  }

  .swop22-stack-photos .swop22-stack-frame-5 .swop22-stack-frame-img-inner {
    padding: 7% 1% 7% 3%;
  }

  .swop22-stack-photos .swop22-stack-frame-6 .swop22-stack-frame-img-inner {
    padding: 8% 3% 6% 1%;
  }
}

/* --- 'Photos-Alt' stack type --- */

.swop22-stack-photos-alt .swop22-stack-frame-text p {
  width: 100%;
  padding: 0 30%;
}

@media all and (max-width: 540px) {
  .swop22-stack-photos-alt .swop22-stack-frame-text p {
    font-size: 14px;
    line-height: 20px;
  }
}

@media all and (max-width: 767px) {
  .swop22-stack-photos-alt .swop22-stack-frame-img-inner {
    height: 100vw;
  }
}

@media all and (min-width: 768px) {
  .swop22-stack-photos-alt .swop22-stack-frame-text p {
    font-size: 22px;
    line-height: 32px;
    letter-spacing: 1.72px;
  }
}

@media all and (min-width: 1000px) {
  .swop22-stack-photos-alt .swop22-stack-frame-text p {
    width: 370px;
    padding: 0;
  }
}

@media all and (min-width: 1000px) and (min-height: 800px) {
  .swop22-stack-photos-alt .swop22-stack-frame-text p {
    width: 470px;
  }
}

/* Photos positioning */

.swop22-stack-photos-alt .swop22-stack-frame-1 .swop22-stack-frame-img-inner {
  padding: 4.5% 5% 5.5% 3%;
}

.swop22-stack-photos-alt .swop22-stack-frame-2 .swop22-stack-frame-img-inner {
  padding: 5.5% 3% 4.5% 5%;
}

@media all and (min-width: 768px) {
  .swop22-stack-photos-alt .swop22-stack-frame-1 .swop22-stack-frame-img-inner {
    padding: 4.5% 2.5% 5.5% 1.5%;
  }

  .swop22-stack-photos-alt .swop22-stack-frame-2 .swop22-stack-frame-img-inner {
    padding: 5.5% 1.5% 4.5% 2.5%;
  }
}

/* --- 'Papers' stack type --- */

.swop22-stack-papers p {
  font-size: 12px;
  line-height: 1em;
}

.swop22-stack-papers .swop22-stack-frame-1 p {
  font-size: 40px;
  line-height: 0.61em;
  letter-spacing: 0.8px;
}

@media all and (min-width: 370px) {
  .swop22-stack-papers p {
    font-size: 14px;
    line-height: 1.2em;
  }
}

@media all and (min-width: 640px) {
  .swop22-stack-papers p {
    font-size: 16px;
    line-height: 1.4em;
  }

  .swop22-stack-papers .swop22-stack-frame-1 p {
    font-size: 57px;
    line-height: 0.81em;
    letter-spacing: 1.6px;
  }
}

@media all and (min-width: 768px) {
  .swop22-stack-frame-text p {
    font-size: 20px;
    line-height: 1.4em;
  }

  .swop22-stack-papers .swop22-stack-frame-1 p {
    font-size: 86px;
    line-height: 0.81em;
    letter-spacing: 2.48px;
  }
}

.swop22-stack-papers .swop22-stack-frame-text p {
  text-shadow: none;
}

/* Photos/text positioning */

.swop22-stack-papers .swop22-stack-frame-1 p {
  max-width: 700px;
}

.swop22-stack-papers .swop22-stack-frame-2 p,
.swop22-stack-papers .swop22-stack-frame-3 p,
.swop22-stack-papers .swop22-stack-frame-5 p {
  max-width: 500px;
}

.swop22-stack-papers .swop22-stack-frame-4 p {
  max-width: 380px;
}

.swop22-stack-papers .swop22-stack-frame-6 p {
  padding-top: 20px;
  max-width: 610px;
}

.swop22-stack-papers .swop22-stack-frame-7 p {
  max-width: 430px;
}

.swop22-stack-papers .swop22-stack-frame-1 .swop22-stack-frame-img-inner {
  max-width: 1036px;
}

.swop22-stack-papers .swop22-stack-frame-2 .swop22-stack-frame-img-inner {
  max-width: 746px;
}

.swop22-stack-papers .swop22-stack-frame-3 .swop22-stack-frame-img-inner {
  max-width: 692px;
}

.swop22-stack-papers .swop22-stack-frame-4 .swop22-stack-frame-img-inner {
  max-width: 664px;
}

.swop22-stack-papers .swop22-stack-frame-5 .swop22-stack-frame-img-inner {
  max-width: 873px;
}

.swop22-stack-papers .swop22-stack-frame-6 .swop22-stack-frame-img-inner {
  max-width: 874px;
}

.swop22-stack-papers .swop22-stack-frame-7 .swop22-stack-frame-img-inner {
  max-width: 612px;
}