.gr-references-item {
  display: flex;
  flex-direction: column;
}

.gr-references-item h5 {
  font-size: calc(24pt * var(--figma-font-scale) * var(--mobile-small-font-rescale,1));
}
.gr-references-item h5+h6 {
  font-size: calc(20pt * var(--figma-font-scale) * var(--mobile-small-font-rescale,1));
  font-weight: normal;
  margin-bottom: calc(32px * var(--figma-px-scale));
}

.gr-references-item input[type="checkbox"] {
  display: none;
}
.gr-references-item input[type="checkbox"]:checked+.carousel {
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  background-color: var(--main-background-color);
  z-index: 1000;
}
.gr-references-item input[type="checkbox"]:checked+.carousel input[type="radio"]:checked~label[for$="-zoom-in"]:not(input[type="radio"]:checked~input[type="radio"]:not(:checked)~*) {
  z-index: 1001;
}
.gr-references-item input[type="checkbox"]:checked+.carousel label[for$="-zoom-in"] {
  position: absolute;
  inset: 0;
  height: auto;
  cursor: zoom-out;
  margin-right: var(--modal-right-margin,0);
}
.gr-references-item input[type="checkbox"]:checked+.carousel label[for$="-zoom-in"]>img {
  object-fit: scale-down;
  filter: drop-shadow(0 0 50px rgba(0,0,0,.4));
}
.gr-references-item input[type="checkbox"]:checked+.carousel label.step-previous,
.gr-references-item input[type="checkbox"]:checked+.carousel label.step-next {
  background-color: #fff;
  position: absolute;
  height: 40%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1002;
}
.gr-references-item input[type="checkbox"]:checked+.carousel label.step-previous {
  border-top-right-radius: 16px;
  border-bottom-right-radius: 16px;
}
.gr-references-item input[type="checkbox"]:checked+.carousel label.step-next {
  /*margin-right: var(--modal-right-margin,0);
  clip-path: xywh(-4px -4px calc(100% + 4px) calc(100% + 8px));*/
  border-top-left-radius: 16px;
  border-bottom-left-radius: 16px;
}
.gr-references-item input[type="checkbox"]:checked+.carousel .pager {
  position: absolute;
  margin-top: 0;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  padding: calc((32px - var(--pager-dot-size)) / 2 * var(--figma-px-scale));
  z-index: 1001;
  border-radius: calc(var(--pager-dot-size) * var(--figma-px-scale));
}
.gr-references-item input[type="checkbox"]:checked+.carousel label.step-previous,
.gr-references-item input[type="checkbox"]:checked+.carousel label.step-next,
.gr-references-item input[type="checkbox"]:checked+.carousel .pager {
  box-shadow: 0 0 4px rgba(0,0,0,.3);
}

.gr-references-item .carousel {
  width: calc((400 / 847 * 1280px) * var(--figma-px-scale));
  height: calc(432px * var(--figma-px-scale));
  position: relative;
  user-select: none;
}
.gr-references-item .carousel input[type="radio"],
.gr-references-item .carousel input[type="radio"]:not(:checked)~*:not(label[for$="-zoom-in"]):not(input[type="radio"]:checked~*:not(input[type="radio"]:checked~input[type="radio"]:not(:checked)~*)):not(.pager) {
  display: none;
}
.gr-references-item .carousel input[type="radio"]:not(:checked)~label[for$="-zoom-in"]:not(input[type="radio"]:checked~*:not(input[type="radio"]:checked~input[type="radio"]:not(:checked)~*)) {
  opacity: 0;
}
.gr-references-item .carousel input[type="radio"]:checked~label[for$="-zoom-in"]:not(input[type="radio"]:checked~input[type="radio"]:not(:checked)~*) {
  z-index: 1;
}
.gr-references-item .carousel label[for$="-zoom-in"] {
  position: absolute;
  inset: 0 0 auto;
  cursor: zoom-in;
  transition:
    opacity .3s ease-out;
}
.gr-references-item .carousel label[for$="-zoom-in"]>img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.gr-references-item .carousel label[for$="-zoom-in"],
.gr-references-item .carousel label.step-previous,
.gr-references-item .carousel label.step-next {
  height: calc(100% - 32px * var(--figma-px-scale));
}
.gr-references-item .carousel label.step-previous,
.gr-references-item .carousel label.step-next {
  width: calc(40px * var(--figma-px-scale));
  box-sizing: border-box;
  display: block;
  position: absolute;
  top: 0;
  z-index: 2;
  cursor: pointer;
}
.gr-references-item .carousel label.step-previous {
  left: 0;
  padding-left: calc(8px * var(--figma-px-scale));
}
.gr-references-item .carousel label.step-next {
  right: 0;
  padding-right: calc(8px * var(--figma-px-scale));
}
.gr-references-item .carousel label.step-previous svg,
.gr-references-item .carousel label.step-next svg {
  width: calc(32px * var(--figma-px-scale));
  height: 100%;
  fill: var(--main-background-color);
}
.gr-references-item .carousel .pager {
  margin-top: calc((400px + (32px - var(--pager-dot-size)) / 2) * var(--figma-px-scale));
  display: flex;
  gap: calc(var(--pager-gap) * var(--figma-px-scale));
  justify-content: center;
  --pager-gap: 16px;
  --pager-dot-size: 12px;
}
.gr-references-item .carousel .pager span {
  border-radius: 50%;
  width: calc(var(--pager-dot-size) * var(--figma-px-scale));
  height: calc(var(--pager-dot-size) * var(--figma-px-scale));
  background-color: var(--subsite-highlight-color);
  transition:
    transform .3s ease-out;
}
.gr-references-item .carousel .pager span:first-of-type {
  background-color: var(--main-background-color);
  z-index: 1;
}
.gr-references-item .carousel input[type="radio"]:nth-of-type(2):checked~.pager span:not(:first-of-type,:nth-child(2)~*),
.gr-references-item .carousel input[type="radio"]:nth-of-type(3):checked~.pager span:not(:first-of-type,:nth-child(3)~*),
.gr-references-item .carousel input[type="radio"]:nth-of-type(4):checked~.pager span:not(:first-of-type,:nth-child(4)~*),
.gr-references-item .carousel input[type="radio"]:nth-of-type(5):checked~.pager span:not(:first-of-type,:nth-child(5)~*),
.gr-references-item .carousel input[type="radio"]:nth-of-type(6):checked~.pager span:not(:first-of-type,:nth-child(6)~*),
.gr-references-item .carousel input[type="radio"]:nth-of-type(7):checked~.pager span:not(:first-of-type,:nth-child(7)~*),
.gr-references-item .carousel input[type="radio"]:nth-of-type(8):checked~.pager span:not(:first-of-type,:nth-child(8)~*),
.gr-references-item .carousel input[type="radio"]:nth-of-type(9):checked~.pager span:not(:first-of-type,:nth-child(9)~*) {
  transform: translateX(calc((var(--pager-gap) + var(--pager-dot-size)) * -1 * var(--figma-px-scale)));
}
.gr-references-item .carousel input[type="radio"]:nth-of-type(2):checked~.pager span:first-of-type {
  transform: translateX(calc((var(--pager-gap) + var(--pager-dot-size)) * var(--figma-px-scale)));
}
.gr-references-item .carousel input[type="radio"]:nth-of-type(3):checked~.pager span:first-of-type {
  transform: translateX(calc((var(--pager-gap) + var(--pager-dot-size)) * 2 * var(--figma-px-scale)));
}
.gr-references-item .carousel input[type="radio"]:nth-of-type(4):checked~.pager span:first-of-type {
  transform: translateX(calc((var(--pager-gap) + var(--pager-dot-size)) * 3 * var(--figma-px-scale)));
}
.gr-references-item .carousel input[type="radio"]:nth-of-type(5):checked~.pager span:first-of-type {
  transform: translateX(calc((var(--pager-gap) + var(--pager-dot-size)) * 4 * var(--figma-px-scale)));
}
.gr-references-item .carousel input[type="radio"]:nth-of-type(6):checked~.pager span:first-of-type {
  transform: translateX(calc((var(--pager-gap) + var(--pager-dot-size)) * 5 * var(--figma-px-scale)));
}
.gr-references-item .carousel input[type="radio"]:nth-of-type(7):checked~.pager span:first-of-type {
  transform: translateX(calc((var(--pager-gap) + var(--pager-dot-size)) * 6 * var(--figma-px-scale)));
}
.gr-references-item .carousel input[type="radio"]:nth-of-type(8):checked~.pager span:first-of-type {
  transform: translateX(calc((var(--pager-gap) + var(--pager-dot-size)) * 7 * var(--figma-px-scale)));
}
.gr-references-item .carousel input[type="radio"]:nth-of-type(9):checked~.pager span:first-of-type {
  transform: translateX(calc((var(--pager-gap) + var(--pager-dot-size)) * 8 * var(--figma-px-scale)));
}

@media (hover: hover) {
  
  .gr-references-item .carousel label.step-previous:hover,
  .gr-references-item .carousel label.step-next:hover {
    background-color: rgba(255,255,255,.2);
  }
  
}
@media (hover: none) {
  
  .gr-references-item .carousel label.step-previous,
  .gr-references-item .carousel label.step-next {
    display: none;
  }
  
}

.gr-references-item .carousel~p {
  font-size: calc(16pt * (17 / 16) * var(--figma-font-scale) * var(--mobile-small-font-rescale,1));
  font-weight: 500;
}
.gr-references-item .carousel~p:not(:last-child) {
  margin-bottom: 1em;
}

.wide-backdrop>.gr-references-item .close-modal {
  display: none;
}

@media (max-width: 1064px) {
  
  .gr-references-item h5,
  .gr-references-item h5+h6 {
    text-align: center;
  }
  .gr-references-item h5+h6 {
    margin-bottom: calc(20px * var(--figma-px-scale));
  }
  
  .gr-references-item input[type="checkbox"]:checked+.carousel {
    margin-bottom: 0;
  }
  .gr-references-item input[type="checkbox"]:checked+.carousel label[for$="-zoom-in"] {
    transition: none;
  }
  
  .gr-references-item .carousel {
    width: 100%;
    height: calc((218px + 32px) * var(--figma-px-scale));
    margin-bottom: calc(20px * var(--figma-px-scale));
  }
  .gr-references-item .carousel label[for$="-zoom-in"],
  .gr-references-item .carousel label.step-previous,
  .gr-references-item .carousel label.step-next {
    height: calc(218px * var(--figma-px-scale));
  }
  .gr-references-item .carousel .pager {
    margin-top: calc((218px + (32px - var(--pager-dot-size)) / 2) * var(--figma-px-scale));
  }
  
}

@media (min-width: 1065px) {
  
  .gr-references-item {
    position: relative;
    
  }
  
  .gr-references-item .carousel {
    position: absolute;
    left: calc(32px * var(--figma-px-scale));
  }
  
  .wide-backdrop>.gr-references-item {
    min-height: calc(432px * var(--figma-px-scale));
    padding: 0 calc(32px * var(--figma-px-scale)) 0 calc((32px + (400 / 847 * 1280px) + 20px) * var(--figma-px-scale));
  }
  .wide-backdrop>.gr-references-item .carousel {
    top: 0;
  }
  
  .modal-backdrop>.gr-references-item.current-modal {
    min-height: calc((56px + 432px + 32px) * var(--figma-px-scale));
    padding: calc(56px * var(--figma-px-scale)) calc(32px * var(--figma-px-scale)) calc(32px * var(--figma-px-scale)) calc((32px + (400 / 847 * 1280px) + 20px) * var(--figma-px-scale));
  }
  .modal-backdrop>.gr-references-item.current-modal .carousel {
    top: calc(56px * var(--figma-px-scale));
  }
  
}