@mixin common {
  width: 100%;
  overflow: hidden;
  display: grid;
}

.lwj-photo-cube {
  width: 100%;
  box-sizing: border-box;
  image {
    display: block;
  }
  .two_in_a_row {
    @include common;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: "item0 item1";
  }
  .three_in_a_row {
    @include common;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: "item0 item1 item2";
  }
  .four_in_a_row {
    @include common;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: "item0 item1 item2 item3";
  }

  .up_one_down_three {
    @include common;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "item0 item0 item0"
      "item1 item2 item3";
  }
  .left_two_right_two {
    @include common;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: min-content min-content;
    grid-template-areas:
      "item0 item1"
      "item2 item3";
  }
  .left_one_right_two {
    @include common;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: min-content min-content;
    grid-template-areas:
      "item0 item1"
      "item0 item2";
  }
  .left_one_right_three {
    @include common;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: min-content min-content;
    grid-template-areas:
      "item0 item1 item1"
      "item0 item2 item3";
  }
  .item0 {
    grid-area: item0;
    overflow: hidden;
  }
  .item1 {
    grid-area: item1;

    overflow: hidden;
  }
  .item2 {
    grid-area: item2;
    overflow: hidden;
  }
  .item3 {
    grid-area: item3;
    overflow: hidden;
  }
  .item-img{
    width: 100%;
    height: 100%;
  }
}