.revealy_fadein_letter {
  opacity: 0;
}

.revealy_fadein_letter.hidden {
  opacity: 0;
}

.revealy_fadein_letter.active {
  opacity: 1;
}

.revealy_fadein_letter>span {
  opacity: 0;
  transition: opacity 400ms cubic-bezier(1, 0, 0.1, 1);
}

.revealy_fadein_letter.active>span {
  opacity: 1;
}

.revealy_tran_tb,
.revealx_tran_tb {
  opacity: 0;
  transform: translate(0, -4vw);
}

.revealy_tran_bt,
.revealx_tran_bt {
  opacity: 0;
  transform: translate(0, 4vw);
}

.revealy_tran_rl,
.revealx_tran_rl {
  opacity: 0;
  transform: translate(4vw, 0);
}

.revealy_tran_lr,
.revealx_tran_lr {
  opacity: 0;
  transform: translate(-4vw, 0);
}

.revealy_tran_tb.active,
.revealy_tran_bt.active,
.revealy_tran_rl.active,
.revealy_tran_lr.active,
.revealx_tran_tb.active,
.revealx_tran_bt.active,
.revealx_tran_rl.active,
.revealx_tran_lr.active {
  transition: transform 750ms ease-in-out 100ms, opacity 750ms ease-in-out 100ms;
  opacity: 1;
  transform: translate(0, 0);
}

.revealy_tran_tb.hidden,
.revealy_tran_bt.hidden,
.revealy_tran_rl.hidden,
.revealy_tran_lr.hidden,
.revealx_tran_tb.hidden,
.revealx_tran_bt.hidden,
.revealx_tran_rl.hidden,
.revealx_tran_lr.hidden {
  visibility: hidden;
  opacity: 0;
  transition: transform 1s, visibility 0s 1s, opacity 1s ease-out;
}

.revealy_tran_tb.hidden a,
.revealy_tran_bt.hidden a,
.revealy_tran_rl.hidden a,
.revealy_tran_lr.hidden a,
.revealx_tran_tb.hidden a,
.revealx_tran_bt.hidden a,
.revealx_tran_rl.hidden a,
.revealx_tran_lr.hidden a {
  pointer-events: none;
  cursor: default;
}

/* images list */
.images-list__container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding-bottom: 1rem;
  max-width: 45rem;
  margin: auto;
}

.container.images-list__container {
  margin: auto;
}

.images-list__container.horizontal-scroll-area {
  max-width: calc(100vw - max(var(--container-gutter), 50% - var(--container-max-width)));
  gap: 0.5rem;
}

.images-list-item:nth-of-type(10n+3) {
  width: 80%;
  margin-right: auto;
}

.images-list-item:nth-of-type(10n+4) {
  width: 80%;
  margin-right: auto;
}

.images-list-item:nth-of-type(10n+5) {
  width: 80%;
  margin-left: auto;
}

.images-list-item:nth-of-type(10n+6) {
  width: 80%;
  margin-right: auto;
}

.images-list-item:nth-of-type(10n+7) {
  width: 100%;
}

.images-list-item:nth-of-type(10n+8) {
  width: 80%;
  margin-left: auto;
}

.images-list-item:nth-of-type(10n+9) {
  width: 80%;
  margin-left: auto;
}

.images-list-item:nth-of-type(10n+10) {
  width: 80%;
  margin-right: auto;
}

.images-list-item:nth-of-type(10n+11) {
  width: 80%;
  margin-left: auto;
}

.images-list-item:nth-of-type(10n+12) {
  width: 80%;
  margin-right: auto;
}


/* images list horizontal */
.images-list-item-horizontal.align-bottom {
  margin-top: 6rem;
}

.images-list-item-horizontal.align-top {
  margin-bottom: 6rem;
}

.images-list-item-horizontal.align-mid-bottom {
  margin-top: 3rem;
}

.images-list-item-horizontal.align-mid-top {
  margin-bottom: 3rem;
}

.images-list-item-horizontal.align-almost-bottom {
  margin-top: 5rem;
}

.images-list-item-horizontal.align-almost-top {
  margin-bottom: 5rem;
}

.images-list-item-horizontal.align-center {
  margin: unset;
}



/* horizontal scroll area */
.container.images-list__container.horizontal-scroll-area {
  margin: 3rem auto;
}

.horizontal-scroll-area {
  display: flex;
  flex-direction: row;
  width: 100vw;
  height: 85vh;
  overflow-x: auto;
  overflow-y: hidden;
  justify-content: flex-start;
  align-items: center;
  margin: 3rem auto;
}

.images-list-item-horizontal {
  height: 100%;
}

.images-list-item-horizontal img {
  max-width: calc(100vw - var(--container-gutter) * 2);
  height: 100%;
  width: auto;
  object-fit: contain;
}

.horizontal-scroll-area-right-arrow {
  position: absolute;
  right: 0;
  z-index: 10;
  transition: opacity 1.8s ease-out;
}

.horizontal-scroll-area-right-arrow>svg {
  height: 30px;
  animation: arrow-flash 3s infinite ease-in-out;
}

@keyframes arrow-flash {

  0%,
  100% {
    opacity: 0.02;
  }

  50% {
    opacity: 0.4;
  }
}

@media screen and (min-width: 700px) {
  .horizontal-area-right-arrow {
    display: none;
  }
}