/* grid flex */

/* 
 * Box home
*/ 

.main-box {
display: grid;
grid-template-columns: repeat(4, 4fr);
grid-gap: 0px;
padding: 0px;
position: relative;
margin-left: auto;
margin-right: auto;
}

.main-content-infinite {
    width: 100%;
    display: inline-block;
}

.box-white img {
  width: 100%;
  height: auto;
}
.box-content {
position: relative;
display: block;
overflow: hidden;
width: 100%;
padding-bottom: 100%;
opacity: 0;
transition: opacity 2.0s cubic-bezier(0.25, 1, 0.5, 1),
transform 2.0s cubic-bezier(0.25, 1, 0.5, 1);
will-change: opacity, transform;
background-color: #fff;
}

/* Entrée fluide */
.box-content.visible {
    opacity: 1;
    transition:
        opacity 2.0s cubic-bezier(0.25, 0.8, 0.35, 1), 
        transform 2.0s cubic-bezier(0.25, 0.8, 0.35, 1);
}

/* Sortie vers le haut (scroll down) */
.box-content.scroll-up {
    opacity: 0;
}

/* Sortie vers le bas (scroll up) */
.box-content.scroll-down {
    opacity: 0;
}

.box-content img {
  position: absolute;
  inset: 0;
  width: 101%;
  height: 101%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s ease, filter 0.8s ease;
}

.box-content:hover img {

  filter: brightness(1.2) contrast(1.2) invert(1);
}

/* Calque en pseudo-élément pour simuler le blend */
.box-content::after {
  content: "";
  position: absolute;
  inset: 0;
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}
.box-titre {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
color: #F5F5F5;
text-align: center;
pointer-events: none;
padding: 0;
margin: 0;
font-weight: 600;
}
#infinite-posts{
  width: 100%;
  height: auto;
  position: relative;
}
#loader {
  position: fixed;
  right: 20px;
  bottom: 20px;
  color: #000;
  padding: 0px;
  font-size: 14px;
  display: none;
}
#loader.show {
  opacity: 1;
  pointer-events: auto;
}