:root {
  --pswp-backdrop: var(--color-bg, #FFFCF0);
  --pswp-text-color: var(--color-text, #100f0f);
  --pswp-button-hover: rgba(0, 0, 0, 0.08);
}

body.layout-project {
  --pswp-backdrop: var(--color-portfolio-bg, var(--color-bg, #FFFCF0));
}

@media (prefers-color-scheme: dark) {
  :root {
    --pswp-backdrop: var(--color-bg, #100F0F);
    --pswp-text-color: #CECDC3;
    --pswp-button-hover: rgba(255, 255, 255, 0.12);
  }

  body.layout-project {
    --pswp-backdrop: var(--color-portfolio-bg, var(--color-bg, #100F0F));
  }
}

.pswp__bg {
  background-color: var(--pswp-backdrop);
  opacity: 1;
}
.pswp__caption,
.pswp__counter {
  color: var(--pswp-text-color);
}

.pswp__button--arrow--next .pswp__icn,
.pswp__button--arrow--prev .pswp__icn {
  stroke: var(--pswp-text-color);
  fill: none;
}

.pswp__button--arrow--next,
.pswp__button--arrow--prev {
  background: transparent;
}

.pswp__button--arrow--next:hover,
.pswp__button--arrow--prev:hover,
.pswp__button--arrow--next:focus-visible,
.pswp__button--arrow--prev:focus-visible {
  background: var(--pswp-button-hover);
}