/*
-----------------------------------------------------------------------------------------------------------------------
BENTOBOX GRID
*/

.bentobox-grid {
  display: grid;
  grid-gap: 1rem;
  width: 100%;
}

.bentobox-grid > *, .bentobox-grid figure:has(a.bricks-lightbox)  {
    display: inline-block;
    height: 100%;
    position: relative;
    width: auto;
    border-radius: 2rem;
    overflow: hidden;
}

/* fix height inside lightbox links */
.bentobox-grid a.bricks-lightbox {
  height: 100%;
}

.bentobox-grid a.bricks-lightbox img {
  display: block;
  transition: transform 0.3s;
  height: 100%;
  object-fit: cover;
}

.bentobox-grid a.bricks-lightbox img:hover {
  transform: scale(1.025);
}

.bentobox-grid .card-zoomback-container {
    aspect-ratio: unset;
    width: 100%;
}

@media screen and (max-width: 767px) { /* this is not  built for the current bentobox-grid styling and should be properly redone */
  .bentobox-grid img {
  border-radius: 0.5rem;
  height: 100%;
  }
  .bentobox-grid {
  --column-gap: 0.5rem;
  --columns: unset;
  display: grid;
  grid-gap: 0.5rem;
  }
}	

.bentobox-grid :nth-child(1) {
  grid-area:image1;
}
.bentobox-grid :nth-child(2) {
  grid-area:image2;
}
.bentobox-grid :nth-child(3) {
  grid-area:image3;
}
.bentobox-grid :nth-child(4) {
  grid-area:image4;
}
.bentobox-grid :nth-child(5) {
  grid-area:image5;
}
.bentobox-grid :nth-child(6) {
  grid-area:image6;
}
.bentobox-grid :nth-child(7) {
  grid-area:image7;
}
.bentobox-grid :nth-child(8) {
  grid-area:image8;
}
.bentobox-grid :nth-child(9) {
  grid-area:image9;
}
.bentobox-grid :nth-child(10) {
  grid-area:image10;
}
.bentobox-grid :nth-child(11) {
  grid-area:image11;
}
.bentobox-grid :nth-child(12) {
  grid-area:image12;
}
.bentobox-grid :nth-child(13) {
  grid-area:image13;
}
.bentobox-grid :nth-child(14) {
  grid-area:image14;
}
.bentobox-grid :nth-child(15) {
  grid-area:image15;
}

/* BentoBox Layouts */

.bentobox-layout-oneliner {
  display:flex;
}
.bentobox-layout-one {
  grid-template-areas:
  "image1 image1 image2 image2 image2 image2 image3 image3 image4 image4"
  "image5 image5 image2 image2 image2 image2 image6 image6 image6 image6";
}
.bentobox-layout-two {
  grid-template-areas:
  "image1 image1 image2 image2 image2 image3 image3 image4 image4"
  "image1 image1 image5 image5 image5 image3 image3 image4 image4";
}
.bentobox-layout-three {
  grid-template-areas:
  "image1 image1 image1 image2 image2 image4 image4 image4 image6 image6"
  "image1 image1 image1 image3 image7 image7 image5 image5 image6 image6";
}
.bentobox-layout-four {
  grid-template-areas:
  "image1 image1 image1 image2 image2 image4 image4 image4"
  "image1 image1 image1 image3 image3 image4 image4 image4";
}
.bentobox-layout-five {
  grid-template-areas:
  "image1 image1 image2 image2 image2 image3 image3 image4 image4"
  "image1 image1 image6 image6 image5 image5 image5 image4 image4";
}
.bentobox-layout-six {
  grid-template-areas:
  "image1 image1 image2 image2 image2 image2 image3 image3 image4 image4"
  "image1 image1 image5 image5 image5 image5 image3 image3 image6 image6";
}
.bentobox-layout-seven {
  grid-template-areas:
  "image1 image1 image1 image3 image3 image3 image3 image2 image2"
  "image1 image1 image1 image3 image3 image3 image3 image2 image2";
}
.bentobox-layout-eight {
  grid-template-areas:
  "image1 image1 image3 image3 image3 image3 image2 image2 image2"
  "image5 image5 image4 image4 image4 image4 image2 image2 image2";
}



.bentobox-container {
  /* box is occupied by a div now, not img */
  display: block;
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color:rgb(77 193 136);
}

.bentobox-container :where(.brxe-image).tag {
  display: block;
  width:100%;
  height: 100%;
  object-fit: cover;
}

.bentobox-container-inner .button {
  color: white;
  margin: 0 auto;
  background-color: #eaf4fe;
  position: absolute;
  z-index: 10;
}

.bentobox-container h4 {
  font-size: 500% !important;
  font-weight:500 !important;
  width: 100%;
  text-align:center;
  color: white;
  position: absolute;
  left: 0;
  top:50%;
  transform: translateY(-50%); 
  z-index: 10;
}

.bentobox-layout-dji-neo {
  grid-template-areas:
  "image1 image1 image1 image2 image2 image2"
  "image1 image1 image1 image3 image3 image3"
  "image4 image4 image5 image5 image6 image6"
  "image4 image4 image5 image5 image6 image6";
}