@import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&display=swap");

a {
  text-decoration: none;
  color: var(--link);
  outline: none;
}

a:hover,
a:focus {
  color: var(--side) !important;
  outline: none;
}

.hidden {
  position: absolute;
  overflow: hidden;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Icons */
.icon {
  display: block;
  width: 1.5em;
  height: 1.5em;
  margin: 0 auto;
  fill: currentColor;
}

main {
  padding: 10px;
}

.slideshow {
  position: relative;
  overflow: hidden;
  margin: 0;
  height: 100vh;
  width: 100%;
  height: calc(100vh - 10em);
  display: grid;
  grid-template-columns: 33% 33% 33%;
  grid-column-gap: 0.5%;
  grid-template-rows: 100%;
  grid-template-areas: "... slide ...";
}

.slide {
  width: 100%;
  display: flex;
  pointer-events: none;
  cursor: pointer;
  position: relative;
  height: 100%;
  grid-area: slide;
  color: var(--text) !important;
}

.slideshow--previewopen .slide {
  cursor: default;
}

.slide--current {
  pointer-events: auto;
}

.slide__img-wrap {
  width: 100%;
  overflow: hidden;
  z-index: 100;
  height: 80%;
  top: 10%;
  position: absolute;
}

.slideshow__deco {
  grid-area: slide;
  background: var(--white);
  width: 100%;
  height: 80%;
  align-self: center;
  position: relative;
  margin: -40px 0 0 0;
  right: -20px;
}

.nav {
  position: absolute;
  background: none;
  width: 3em;
  height: 3em;
  z-index: 1000;
  border: 0;
  padding: 0;
  margin: 0;
  pointer-events: none;
  transition: transform 0.8s, opacity 0.8s;
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}

.nav--next {
  bottom: 1em;
  right: 1em;
}

.icon--navarrow-next {
  transform: rotate(45deg);
}

.nav--prev {
  top: 1em;
  left: 1em;
}

.icon--navarrow-prev {
  transform: rotate(-135deg);
}

.slideshow--previewopen .nav {
  opacity: 0;
  transition-duration: 0.4s;
}

.slideshow--previewopen .nav--next {
  transform: translate3d(100%, 100%, 0);
}

.slideshow--previewopen .nav--prev {
  transform: translate3d(-100%, -100%, 0);
}

.slide__img {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-size: cover;
  background-position: 50% 50%;
  position: absolute;
  pointer-events: none;
  transform: scale3d(1.01, 1.01, 1);
  display: none;
}

.js .slide__img-wrap,
.js .slide__title-wrap,
.js .slide__side {
  opacity: 0;
  pointer-events: none;
}

.js .slide--current .slide__img-wrap {
  opacity: 1;
  pointer-events: auto;
}

.slide--visible .slide__img-wrap {
  pointer-events: auto;
}

.slide__title-wrap {
  justify-self: flex-end;
  width: 100%;
  position: relative;
  z-index: 1000;
  text-shadow: 4px 1px 1px #000000;
}

.slide__number {
  display: block;
  font-size: 2em;
  font-weight: bold;
}

.slide__number::before {
  content: "\2014";
  display: inline-block;
  margin: 0 1em 0 0;
}

.slide__title,
.slide__subtitle,
.slide__side {
  display: none;
}

.content {
  font-family: "Libre Baskerville", serif;
  position: absolute;
  top: 10em;
  left: 0;
  width: 100%;
  height: calc(100% - 10em);
  pointer-events: none;
  z-index: 100;
  color: var(--background) !important;
}

.content__item {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  padding: 10vh 5vw;
  overflow: auto;
}

.content__item--current,
.content__item--current ~ .content__close {
  pointer-events: auto;
}

.content__close {
  position: absolute;
  top: 1em;
  left: 1em;
  background: none;
  cursor: pointer;
  color: currentColor !important;
  border: 0;
  margin: 0;
  padding: 0;
}

.icon--longarrow {
  width: 2em;
}

.content__close:focus {
  outline: none;
}

.content__number {
  font-weight: bold;
}

.content__number::before {
  content: "\2014";
  display: inline-block;
  margin: 0 1em 0 0;
}

.content__title {
  margin: 0 0 0.5em 0;
  font-size: 2em;
}

.content__text {
  font-size: 0.85em;
}

.js .content__title,
.js .content__subtitle,
.js .content__number,
.js .content__text,
.js .content__close {
  opacity: 0;
}

.visible {
  display: block !important;
}

@media screen and (min-width: 765px) {
  .slideshow {
    height: calc(100vh - 4em);
    grid-template-columns: 27% 27% 27%;
    grid-column-gap: 9.5%;
  }
  .slide {
    padding: 10vh 0 7vh;
    flex-direction: column;
    justify-content: space-between;
  }
  .slide__side {
    margin: 0 0 0 -1.85em;
  }
  .slide__title-wrap {
    margin: 0 0 0 -1.85em;
  }
  .slide__title,
  .slide__subtitle,
  .slide__side {
    display: block;
  }
  .slide__title {
    font-size: 3.25em;
    margin: 0 0 0.25em;
  }
  .slide__subtitle {
    font-weight: normal;
    margin: 0;
    min-height: 50px;
  }
  .slide__side {
    color: var(--side) !important;
    position: relative;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    z-index: 1000;
  }
  .content {
    /* top: 0; */
    height: 100%;
  }
  .content__item {
    padding: calc(10vh + 4em) 0 7vh;
    width: 50.5%;
    right: 7.5%;
    overflow: visible;
  }
  .content__close {
    left: 42%;
    top: calc(10vh + 1em);
  }
  .content__number {
    position: absolute;
    top: calc(10vh + 1em);
    right: 0;
    font-size: 2em;
  }
  .content__title {
    font-size: 2.5rem;
  }

  .content__text {
    font-size: 0.95rem;
    column-count: 2;
    column-gap: 1.7rem;
    max-width: 600px;
    text-align: justify;
  }
}

@media screen and (max-width: 976px) {
  .slideshow {
    height: calc(100vh - 7em);
  }

  .content__title {
    font-size: 2rem;
  }
  .content__text {
    font-size: 0.85rem;
  }
  .content__close {
    left: 37%;
  }
}

@media (max-device-height: 650px) and (min-width: 765px) and (max-width: 910px) {
  .content__title {
    font-size: 1.5rem;
  }
  .content__text {
    font-size: 0.8rem;
  }
  .content__item {
    width: 55%;
  }
}

@media (max-width: 765px) {
  .content__close {
    top: -1px;
    left: 5%;
    width: 90%;
    background-color: white;
  }
  .content__close .icon {
    left: 0%;
    margin: 0 25px;
  }
}