.bento-0,
.bento-1,
.bento-2,
.bento-3,
.bento-4,
.bento-5,
.bento-6,
.bento-7,
.bento-8 {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.1);
  flex-direction: column;
  padding: 2rem;
  position: relative;
  overflow: hidden;
}

.bento__link,
.bento__more {
  color: #fff;
}
.bento .bento__image img {
  width: 100%;
  height: auto;
}

.bento__image.image-background img {
  width: 100%;
  height: revert-layer;
  object-fit: cover;
  transition: all 0.4s ease-in-out;
}
.bento__item .bento__image.image-background {
  transform: scale(1);
  transition: all 0.4s ease-in-out;
}
.bento__item:hover .bento__image.image-background {
  transition: all 0.4s ease-in-out;
  transform: scale(1.3);
}

.bento__image.top-right {
  position: absolute;
  top: 4%;
  right: 4%;
}
.bento__image.top-left {
  position: absolute;
  top: 4%;
  left: 0;
  right: 0;
}
.bento__image.bottom-right {
  position: absolute;
  bottom: -12%;
  right: 0%;
}
.bento__image.buttom-left {
  position: absolute;
  bottom: 0;
}
.bento__image.image-background {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: -7;
  opacity: 0.3;
}

.three-bento {
  display: grid; 
  height: 100%; 
  width: 100%; 
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 16px; 
  padding: 5rem 0;
}

.four-bento {
  display: grid;
  height: 100%;
  width: 100%;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(1, 1fr);
  gap: 16px;
  padding: 5rem 0;
}

.five-bento,
.six-bento,
.eight-bento,
.nine-bento {
  display: grid;
  height: 100%;
  width: 100%;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 16px;
  padding: 5rem 0;
}


.three-bento .bento-0 {
  grid-area: 1 / 1 / 3 / 2;
}
.three-bento .bento-1 {
  grid-area: 1 / 2 / 2 / 3;
}
.three-bento .bento-2 {
  grid-area: 2 / 2 / 3 / 3;
}

.three-bento .bento-0 .bento__image.top-left {
  top: 4%;
  left: -10%;
}
.three-bento .bento-0 .bento__image img {
  width: 48%;
  height: auto;
}


.four-bento .bento-0 {
  grid-column: span 3;
  grid-row: span 1;
}
.four-bento .bento-1 {
  grid-column: span 1;
  grid-row: span 1;
}
.four-bento .bento-2,
.four-bento .bento-3 {
  grid-column: span 2;
  grid-row: span 1;
}

.five-bento .bento-0 {
  grid-column: span 3; 
  grid-row: span 3;
}
.five-bento .bento-1 {
  grid-column: span 1; 
  grid-row: span 3;
}
.five-bento .bento-2 {
  grid-column: span 1;
  grid-row: span 5;
}
.five-bento .bento-3 {
  grid-column: span 3; 
  grid-row: span 5;
}
.five-bento .bento-4 {
  grid-column: span 4; 
  grid-row: span 5;
}


.six-bento .bento-0,
.six-bento .bento-1 {
  grid-column: span 2;
  grid-row: span 1;
}
.six-bento .bento-2 {
  grid-column: span 1;
  grid-row: span 4;
  justify-content: flex-end;
  align-items: flex-start;
}
.six-bento .bento-3 {
  grid-column: span 2;
  grid-row: span 2;
  justify-content: flex-end;
  align-items: flex-start;
}


.six-bento .bento__link {
  transform: translateY(10px);
  transition: all 0.4s ease-in-out;
}
.six-bento .bento__item:hover .bento__link {
  transform: translateY(0px);
  transition: all 0.4s ease-in-out;
}
/* .six-bento .bento-2 .bento__more,
.six-bento .bento-3 .bento__more {
  transform: translateY(10px);
  transition: all 0.4s ease-in-out;
}
.six-bento .bento-2:hover .bento__more,
.six-bento .bento-3:hover .bento__more {
  transform: translateY(0px);
  transition: all 0.4s ease-in-out;
} */

.six-bento .bento-4 {
  grid-column: span 1;
  grid-row: span 2;
}
.six-bento .bento-5 {
  grid-column: span 3;
  grid-row: span 2;
}

.eight-bento .bento-0,
.eight-bento .bento-1 {
  grid-column: span 2;
  grid-row: span 3;
}
.eight-bento .bento-2,
.eight-bento .bento-7 {
  grid-column: span 2;
  grid-row: span 4;
}
.eight-bento .bento-3,
.eight-bento .bento-5,
.eight-bento .bento-6 {
  grid-column: span 1;
  grid-row: span 4;
}
.eight-bento .bento-4 {
  grid-column: span 2;
  grid-row: span 3;
}

.nine-bento .bento-0,
.nine-bento .bento-1,
.nine-bento .bento-2,
.nine-bento .bento-3 {
  grid-column: span 1;
  grid-row: span 1;
}
.nine-bento .bento-4 {
  grid-column: span 2;
  grid-row: span 3;
}
.nine-bento .bento-5,
.nine-bento .bento-6 {
  grid-column: span 1;
  grid-row: span 3;
}
.nine-bento .bento-7,
.nine-bento .bento-8 {
  grid-column: span 2;
  grid-row: span 4;
}

/* BENTO CONTENT */
.bento__title {
  font-size: 2.2rem;
  color: var(--color-dark);
}
/* .bento__more {
  color: var(--color-dark);
} */

/* BENTO EXTRAS */
.six-bento .bento-5 .bento__image { width: 24%;}
.six-bento .bento-5 .bento__image.bottom-right {
  position: absolute;
  bottom: 0%;
  right: 0%;
  overflow: hidden;
  width: 100%;
  transform: scale(1.1);
  transition: all .5s ease-in-out;
}

.six-bento .bento-4 {
  display: flex;
  justify-content: flex-end;
}

.six-bento .bento-4 .bento__title, .six-bento .bento-4 .bento__subtitle {text-align: center; line-height: 1.1;}
.six-bento .bento-4 .bento__image img {
  width: 40%;
  margin: 0 auto;
  display: block;

}
.six-bento .bento-3 .bento__title { width: 50%;}
.six-bento .bento-3 .bento__animation dotlottie-player {
  position: absolute;
  width: 40%;
  top: 0;
  right: 5%;
}

.six-bento .bento-1 .bento__image.top-left {
  position: absolute;
  top: 50%;
  transform: translateY(-40%);
  mix-blend-mode: multiply;
  opacity: 0.2;
}

.six-bento .bento-0 .bento__animation dotlottie-player {
  width: 26%;
  height: auto;
  position: absolute;
  bottom: -29px;
  right: 0;
}

@media(min-width: 2560px) {}
@media(min-width: 1378px) and (max-width: 1600px)  {}
@media(min-width: 1180px) and (max-width: 1377px) {}
@media(min-width: 768px) and (max-width: 1179px) {
  .six-bento .bento-2 {
    grid-column: span 2;
    grid-row: span 1;
  }
  .six-bento .bento-3 .bento__image.bottom-right {
    position: absolute;
    top: 4rem;
    right: 0%;
  }
  .six-bento .bento-4 {
    grid-column: span 2;
    grid-row: span 1;
  }
  .six-bento .bento-5 {
    grid-column: span 4;
    grid-row: span 1;
  }
  .bento .bento__image img {
    width: 100%;
    height: auto;
    opacity: .5;
    transform: translateX(-39px) scale(1.5);
}
}
@media(min-width: 426px) and (max-width: 767px) {
  .six-bento .bento-2 {
    grid-column: span 4;
    grid-row: span 1;
  }
  .six-bento .bento-4,
  .six-bento .bento-3 {
    grid-column: span 2;
    grid-row: span 2;
  }
  .six-bento .bento-5 {
    grid-column: span 4;
    grid-row: span 2;
  }
}
@media(max-width: 426px) {
  .three-bento .bento-0 .bento__image img {
    width: 88%;
    height: auto;
  }
  .bento .bento__image img {
    width: 100%;
    height: auto;
    opacity: .5;
    transform: translateX(-39px) scale(1.5);
  }
  .six-bento .bento-2 {
    grid-column: span 2;
    grid-row: span 2;
  }
  .six-bento .bento-4, 
  .six-bento .bento-5 {
    grid-column: span 4;
    grid-row: span 2;
  }
  .bento-0, .bento-1, .bento-2, .bento-3, .bento-4, .bento-6, .bento-7, .bento-8 {
    padding: 1.1rem;
    align-items: flex-start;
  }
  .bento-5 {
    padding: 1.1rem;
  }
  .bento__title {
    font-size: 1.3rem;
  }
  .six-bento .bento-0 .bento__animation dotlottie-player {
    width: 64% !important;
    bottom: -19px !important;
    right: -25px !important;
    opacity: .5 !important;
  }
  .six-bento .bento-0 .bento__image.bottom-right { display: none;}
  .six-bento .bento-3 .bento__animation dotlottie-player {
    width: 60% !important;
    top: -12% !important;
    right: 21% !important;
  }
  .six-bento .bento-3 .bento__image.bottom-right {
    bottom: 4rem;
  }
  .six-bento .bento-4 .bento__image img {
    width: 49% !important;
    margin: 0 0 0 auto !important;
    opacity: 0.3;
    transform: scale(2.5) translateX(4rem);
  }  
  .six-bento .bento-4 .bento__title { 
    font-size: 1.5rem;
    width: 50%;
    text-align: left;
  }
  .six-bento .bento-5 .bento__image {
    width: 46%;
    top: 0;
    left: 0;
    transform: scale(1.5) translateX(-1rem);
    opacity: .5;
  }
}