body {
  background-color: #F5F6F8;
}
.grid {
  $gap: 17px;
  max-height: 680px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  margin: 40px;
  .item {
    width: calc(33.33% - #{($gap * 2 / 3)});
    margin: 0 $gap $gap 0;
    border-radius: 10px;
    box-shadow: 0 1px 4px 0 rgba(black,.06);
    box-sizing: border-box;
    background-color: white;
    font-weight: 700;
    color: #09c665;
    display: flex;
    align-items: center;
    justify-content: center;
    &.wheather { height: 156px; }
    &.app { height: 79px; }
    &.webtoon { height: 384px; margin-bottom: 0;}
    &.now { height: 326px; }
    &.card1 { height: 230px; margin-bottom: 60px; }
    &.money { height: 50px; margin-right: 0; }
    &.stock { height: 178px; margin-right: 0; }
    &.card2 { height: 230px; margin-right: 0; }
  }
  
  @media (max-width: 1111px) {
    max-height: 1000px;
    .item {
      width: calc(50% - #{($gap / 2)});
      &.wheather { order: 0; }
      &.money { order: 1; }
      &.stock { order: 2; }
      &.card1 { order: 3; margin-bottom: $gap; }
      &.card2 { order: 4; margin-bottom: 0; }
      &.now { order: 5; margin-right: 0; }
      &.app { order: 6; margin-right: 0; }
      &.webtoon { order: 7; margin-right: 0; }
    }
  }
  
  @media (max-width: 640px) {
    max-height: none;
    .item {
      width: 100%;
      &.wheather { order: 0; }
      &.now { order: 1; }
      &.money { order: 2; }
      &.stock { order: 3; }
      &.app { order: 4; }
      &.webtoon { order: 5; margin-bottom: $gap; }
      &.card1 { order: 6; margin-bottom: 0; }
      &.card2 { display: none; }
    }
  }
}