decor-6-expe/maquette-tests/assets/css/portfolio.css

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


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

.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;
}

[data-chapter="portfolio"] .chapter-header h2 span,
[data-chapter="portfolio"] .chapter-header .author span{
    color: black;
    padding-right: 0.75ch;
}


/* DOUBLE */

.spread{
    position: relative;
    z-index: -1;
}
.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: calc((var(--pagedjs-margin-top) + var(--bleed-images))*-1);
    left: calc((var(--pagedjs-margin-left) + var(--bleed-images))*-1);
    overflow: hidden;
    break-after: page;
  }
  .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: calc((var(--pagedjs-margin-top) + var(--bleed-images))*-1);
    left: calc(var(--pagedjs-margin-left)*-1);
    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));
  }

  
  



  /* SPECIFIC */
  
  #josefa-1 .spread-content img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: -310px 10px;

}


  #josefa-2 .spread__left{
    top: -280px;
  }
  #josefa-2 .spread-content img{
    width: 100%;
    height: 120%;
    object-fit: cover;
    object-position: -1700px 0px;

}


#josepha-2__1{
    z-index: 100;
    width: 140mm;
    height: 190mm;
    position: absolute;
    left: -15mm;
    overflow: hidden;
}

#josepha-2__1 img{ 
    width: 100%;
    height: 100%;
    object-fit: cover; 
      object-position: -900px 0px;
}

#josefa-3{
    break-before: left;
}

 #josefa-3 .background{
    width: 100%;
    height: 120%;
    object-fit: cover;
    object-position: -1800px 0px;

}


#josepha-3__1_left{
        z-index: 100;
    width: 100%;
    height: 156mm;
    position: absolute;
    top: -100px;
       overflow: hidden;
}

#josepha-3__1_left img{
        width: 100%;
    height: 100%;
    object-fit: cover; 
      object-position: -900px 0px;
   
}

#josepha-3__1_right{
    z-index: 100;
    width: calc(var(--pagedjs-pagebox-width)*0.4);
    height: 156mm;
    position: absolute;
    top: -100px;
       overflow: hidden;
}

#josepha-3__1_right img{
     width: 100%;
    height: 100%;
    object-fit: cover; 
    object-position: calc(var(--pagedjs-pagebox-width)*-1 - var(--bleed-images) - 900px) 0px;
}


#josefa-4{
    break-before: left;
}

 #josefa-4 .background{
    width: 100%;
    height: 120%;
    object-fit: cover;
    object-position: -1900px -200px;

}



#josepha-4_inside{
    z-index: 100;
    width: 140mm;
    height: 190mm;
    position: absolute;
    bottom: -5mm;
    right: -5mm;
    overflow: hidden;
}

#josepha-4_inside img{ 
    width: 100%;
    height: 100%;
    object-fit: cover; 
      /* object-position: -900px 0px; */
}




#josefa-5{
    break-before: left;
}

 #josefa-5 figure{
    /* background-color: black; */
 }

 #josefa-5 .background{
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* object-position: -1900px -200px; */

}

.josepha-grid-1{
break-before: left;
}

.josepha-grid{
    width: 100%;
}


.josepha-grid img{
    width: 100%;
    margin-bottom: calc(var(--baseline)*0.5);
}