:root{
    --bleed-images: 3mm;
    --pagedjs-fold: 0px;
}

.pagedjs_portfolio_page .pagedjs_sheet{
  overflow: visible !important;
}

[data-chapter="portfolio"] p{
    color: #FFF;
}

.pagedjs_portfolio_page .pagedjs_margin-bottom-right .pagedjs_margin-content::after,
.pagedjs_portfolio_page .pagedjs_margin-bottom-left .pagedjs_margin-content::after{
    background-color: black;
    color: white;
    padding: 0;
}


/* ------ DOUBLE PAGE ------- */ 

.spread{
  position: absolute;
  z-index: -1;
  width: calc(var(--pagedjs-pagebox-width) * 2 + var(--bleed-images));
  height: calc(var(--pagedjs-pagebox-height) + var(--bleed-images));
  top: calc((var(--pagedjs-margin-top) + var(--bleed-images))*-1);
  left: calc((var(--pagedjs-margin-left) + var(--bleed-images))*-1);
}

.spread-inner{
  position: relative;
  width: calc(var(--pagedjs-pagebox-width) + var(--bleed-images));
  height: calc(var(--pagedjs-pagebox-height) + var(--bleed-images));
}

.spread__left{
  margin: 0;
  width: calc(var(--pagedjs-pagebox-width) + var(--bleed-images));
  height: calc(var(--pagedjs-pagebox-height) + var(--bleed-images)*2)!important;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  break-after: page;
  /*break-before: left;*/
}
.spread__right{
  margin: 0;
  width: calc(var(--pagedjs-pagebox-width) + var(--bleed-images));
  height: calc(var(--pagedjs-pagebox-height) + var(--bleed-images)*2)!important;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.spread-content{
  margin: 0;
  width: calc(var(--pagedjs-pagebox-width)*2 + var(--bleed-images)*2);
  height: calc(var(--pagedjs-pagebox-height) + var(--bleed-images)*2)!important;
  position: absolute;
  top: 0;
  left: 0;
}

.spread__left .spread-content{
  left: calc(var(--pagedjs-fold)*-1);
}
.spread__right .spread-content{
  left: calc((var(--pagedjs-pagebox-width) + var(--bleed-images))*-1 + var(--pagedjs-fold));
}

.spread-content img{
  height: 100%;
  object-fit: cover;
}

.spread .image__top{
  z-index: 9000;
  position: absolute;
  /*overflow: hidden;*/
}

.spread .image__top img{ 
  width: 100%;
  height: 100%;
  object-fit: cover; 
}

.spread .image__top.topleft{
  top: 0;
  left: 0;
}

.spread .image__top.topright{
  top: 0;
  right: 0;
}

.spread .image__top.bottomleft{
  bottom: 0;
  left: 0;
}

.spread .image__top.bottomright{
  bottom: 0;
  right: 0;
}

.spread .image__top.center{
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}