@import "./../../common/mordern-reset.css";
@import "./../../common/base.css";

h1 {
  margin-block: 1rem;
}

.grid-item1 {
  background-color: lightblue;
}
.grid-item2 {
  background-color: lightcoral;
}
.grid-item3 {
  background-color: lightyellow;
}
.grid-item4 {
  background-color: lightseagreen;
}

.grid-box {
  border: 1px solid violet;
  background-color: gray;
  display: grid;
  position: relative;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 50px);
  isolation: isolate;

  .grid-item1 {
    grid-row: 1 / span 2;
    grid-column: 1 / span 2;
  }
  .grid-item2 {
    grid-row: 2 / span 2;
    grid-column: 2 / span 2;
  }

  .grid-item3 {
    position: absolute;
    inset: 2rem;
    z-index: -1; /* 본문 밑으로 내려가기 때문에 음수 사용때 조심 */
  }
}

/* 그리드 정렬 */
.grid-wrapper {
  border: 1px solid var(--red);
  block-size: 400px;
  display: grid;
  grid-template-columns: repeat(5, 200px);
  grid-template-rows: repeat(5, 50px);

  /* justify-items: center;
  align-items: center; */
  /* place-items: center; */

  /* justify-content: center; */
  /* align-content: center; */

  place-content: center;

  .grid-item2 {
    font-size: 1.5rem;
    /* align-self: center;
    justify-self: center; */
    place-self: center;
  }
}