/*!************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/three-image-lightbox/style.scss ***!
  \************************************************************************************************************************************************************************************************************************************************************/
/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 *
 * Replace them with your own styles or remove the file completely.
 */
/* @group Three images lightbox
------------------------------------ */
.three-images-lightbox {
  position: relative;
  padding: 0;
  background-color: var(--dark-green);
  color: var(--light-green);
}

/* Images box
------------------------------------ */
.three-images-lightbox .images {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--light-green);
  padding: 0;
}

.three-images-lightbox .images .image {
  width: 100%;
}

.three-images-lightbox .images .image:not(:last-of-type) {
  margin: 0 0 4.1rem;
}

.three-images-lightbox .images .image .img-box {
  margin: 0;
  height: 29rem;
}

.three-images-lightbox .images .image.first {
  padding: 0 4rem;
}

.three-images-lightbox .images .image.first .img-box {
  height: 36.7rem;
}

/* Figcaption box
------------------------------------ */
.three-images-lightbox .images .image .figcaption {
  margin: 1rem 0 0;
}

.three-images-lightbox .images .image .figcaption span {
  text-transform: uppercase;
  font-size: 1.4em;
  line-height: 1.714em;
  letter-spacing: 0.04em;
}

.three-images-lightbox .images .image .txt-box {
  display: none;
}

@media only screen and (min-width: 961px) {
  /* Images box
  ------------------------------------ */
  .three-images-lightbox .images .image {
    cursor: pointer;
    width: 57rem;
  }
  .three-images-lightbox .images .image .img-box {
    height: 42.2rem;
  }
  .three-images-lightbox .images .image.first {
    width: 45.5rem;
    padding: 0;
  }
  .three-images-lightbox .images .image.first .img-box {
    height: 53.2rem;
  }
  .three-images-lightbox .images .image:not(:last-of-type) {
    margin: 0 0 22.2rem;
  }
  .three-images-lightbox .images .image .img-box img {
    transform: scale(1.1);
    transition: all var(--delay) ease;
  }
  .three-images-lightbox .images .image .img-box:hover img {
    transform: scale(1);
  }
  /* Figcaption box
  ------------------------------------ */
  .three-images-lightbox .images .image .figcaption {
    margin: 2rem 0 0;
  }
  .three-images-lightbox .images .image .figcaption span {
    font-size: 1.8em;
    line-height: 2em;
    letter-spacing: 0.06em;
  }
}
@media only screen and (min-width: 1441px) {
  /* General
  ------------------------------------ */
}
@media only screen and (min-width: 961px) and (max-width: 1440px) {
  /* General
  ------------------------------------ */
}
@media only screen and (min-width: 0) and (max-width: 960px) {
  /* Figcaption box
  ------------------------------------ */
  .three-images-lightbox .images .image .figcaption {
    padding: 0 1rem;
  }
}
/* @end Three images lightbox */
/* @group Lightbox
------------------------------------ */
.three-images-lightbox--lightbox {
  display: flex;
  align-items: center;
  position: fixed;
  height: 100%;
  width: 100%;
  inset: 0;
  z-index: 999999;
  background-color: var(--dark-green);
  color: var(--light-green);
}

.three-images-lightbox--lightbox .row {
  height: 100%;
  max-width: 144rem;
  max-height: 78rem;
}

/* Image box
------------------------------------ */
.three-images-lightbox--lightbox .image .img-box img {
  pointer-events: none;
}

/* Text box
------------------------------------ */
.three-images-lightbox--lightbox .text {
  height: 100%;
  text-align: center;
  padding: 0 3rem;
}

.three-images-lightbox--lightbox .text h3 {
  font-size: 5em;
  line-height: 1.2em;
  margin: 0 0 4.4rem;
}

.three-images-lightbox--lightbox .text h2 {
  font: 400 1.4em/1.71em var(--work-font);
  margin: 0 0 5.4rem;
}

.three-images-lightbox--lightbox .text p {
  font-size: 2em;
  line-height: 2em;
  letter-spacing: 0.04em;
  max-height: 43.8rem;
  overflow: auto;
  padding-right: 0.6rem;
}

.three-images-lightbox--lightbox .text p::-webkit-scrollbar {
  width: 8px;
}

.three-images-lightbox--lightbox .text p::-webkit-scrollbar-track {
  background: rgba(252, 240, 229, 0.4);
  border-radius: 8px;
}

.three-images-lightbox--lightbox .text p::-webkit-scrollbar-thumb {
  background: var(--light-green);
  border-radius: 8px;
}

.three-images-lightbox--lightbox [data-comp=closeLightbox] {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0.8rem;
  height: 6rem;
  width: 6rem;
  border-radius: 100%;
  background-color: var(--light-green);
  color: var(--dark-green);
  text-transform: uppercase;
  font-weight: 600;
  font-size: 1.2em;
  line-height: 1.5em;
  letter-spacing: 0.1em;
}

.three-images-lightbox--lightbox [data-comp=closeLightbox]::before {
  display: inline-block;
}

@media only screen and (min-width: 961px) {
  .three-images-lightbox--lightbox article {
    height: 100%;
  }
  /* Image box
  ------------------------------------ */
  .three-images-lightbox--lightbox .image .img-box {
    width: 100%;
    height: 100%;
    margin: 0;
  }
  /* Text box
  ------------------------------------ */
  .three-images-lightbox--lightbox .text {
    padding: 12rem 6.5rem 8.5rem 11.8rem;
    text-align: left;
  }
  .three-images-lightbox--lightbox .text h3 {
    font-size: 5.4em;
    line-height: 1.148em;
    margin: 0 0 0.8rem;
  }
  .three-images-lightbox--lightbox .text h2 {
    font-size: 1.8em;
    line-height: 2.1em;
    letter-spacing: 0.06em;
    margin: 0 0 4.5rem;
  }
  .three-images-lightbox--lightbox .text p {
    font-size: 1.8em;
    letter-spacing: 0.01em;
    max-height: 43.8rem;
    padding-right: 6.5rem;
  }
  .three-images-lightbox--lightbox [data-comp=closeLightbox] {
    position: absolute;
    right: 3.7rem;
    top: 3.7rem;
  }
}
@media only screen and (min-width: 961px) and (max-width: 1440px) {
  .three-images-lightbox--lightbox [data-comp=closeLightbox] {
    top: 3.7rem;
  }
}
@media only screen and (min-width: 0) and (max-width: 960px) {
  /* Text box
  ------------------------------------ */
  .three-images-lightbox--lightbox .text {
    text-align: center;
  }
  .three-images-lightbox--lightbox [data-comp=closeLightbox] {
    margin: 3.7rem 0 3rem;
  }
}
/* Animation */
body[data-three-images-lightbox=opened] {
  overflow: hidden;
}

.three-images-lightbox--lightbox {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all var(--delay) ease;
}

.three-images-lightbox--lightbox .image .img-box {
  opacity: 0;
  scale: 0.5;
  transition: all var(--delay) ease;
}

.three-images-lightbox--lightbox .text {
  transform: translateX(100%);
  transition: all var(--delay) ease;
}

.three-images-lightbox--lightbox.show {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

.three-images-lightbox--lightbox.show .text {
  transform: translateX(0);
}

.three-images-lightbox--lightbox.show .image .img-box {
  opacity: 1;
  scale: 1;
}

/* @end Lightbox */

/*# sourceMappingURL=style-index.css.map*/