.bento * {
  box-sizing: border-box;
}

{# GRID #}
.bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
@media screen and (min-width: 600px) {
  .bento[columns="2"],
  .bento[columns="3"] {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width: 920px) {
  .bento[columns="3"] {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (max-width: 600px) {
  .bento {
    gap: 12px;
  }
}

{# ITEM #}
.bento__item {
  position: relative;
  overflow: hidden;
  transition: var(--transition);
}
.bento__item[background] {
  border-radius: 20px;
}
.bento__item[background="default"] {
  background: var(--color-background-card);
}
.bento__item[background="light"] {
  background: var(--color-body);
  box-shadow: var(--shadow);
}
.bento__item:not([background]) {
  gap: 28px;
}

@media screen and (min-width: 600px) {
  .bento[columns="2"] .bento__item[size="2"],
  .bento[columns="2"] .bento__item[size="3"],
  .bento[columns="3"] .bento__item[size="2"],
  .bento[columns="3"] .bento__item[size="3"] {
    grid-column: span 2;
  }
}
@media screen and (min-width: 920px) {
  .bento[columns="3"] .bento__item[size="3"] {
    grid-column: span 3;
  }
}
@media screen and (max-width: 600px) {
  .bento__item:not([background]) {
    gap: 20px;
  }
}

.bento__item {
  display: flex;
  flex-direction: column;
}
.bento__item[structure="column_reverse"] {
  flex-direction: column-reverse;
}
.bento__item[structure="row"] {
  flex-direction: row;
}
.bento__item[structure="row_reverse"] {
  flex-direction: row-reverse;
}

@media screen and (max-width: 600px) {
  .bento__item[structure="row"] {
    flex-direction: column;
  }
  .bento__item[structure="row_reverse"] {
    flex-direction: column-reverse;
  }
}

.bento__description {
  width: 100%;
}
.bento__item[background] .bento__description {
  padding: 28px;
}
@media screen and (max-width: 600px) {
  .bento__item[background] .bento__description {
    padding: 20px;
  }
}

.bento__item[alignment="center"] {
  align-items: center;
}
.bento__item[alignment="end"] {
  align-items: end;
}

.bento__img {
  width: 100%;
  height: 100%;
  min-height: 180px;
  object-fit: cover;
  object-position: top left;
}
.bento__item:not([background]) .bento__img {
  border-radius: 20px;
}

@media screen and (min-width: 600px) {
  .bento__item[structure="row"] .bento__img,
  .bento__item[structure="row_reverse"] .bento__img {
    max-width: 50%;
  }
}

.bento__img[size="contain"] {
  object-fit: contain;
}
.bento__img[position="top_center"] {
  object-position: top center;
}
.bento__img[position="top_right"] {
  object-position: top right;
}
.bento__img[position="middle_left"] {
  object-position: center left;
}
.bento__img[position="middle_center"] {
  object-position: center;
}
.bento__img[position="middle_right"] {
  object-position: center right;
}
.bento__img[position="bottom_left"] {
  object-position: bottom left;
}
.bento__img[position="bottom_center"] {
  object-position: bottom center;
}
.bento__img[position="bottom_right"] {
  object-position: bottom right;
}

@media screen and (min-width: 600px) {
  .bento__item:has(.bento__link):hover {
    transform: translateY(-20px);
  }
}
.bento__link {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
}