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

h1 {
  margin-block: 1rem;
}

.grid-item1 {
  background-color: var(--red);
}

.grid-item2 {
  background-color: var(--orange);
}

.grid-item3 {
  background-color: var(--yellow);
}

.grid-item4 {
  background-color: var(--green);
}

.grid-box {
  border: 1px solid var(--green);
  display: grid;
  position: relative;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 50px);
  margin-bottom: 100px;
  isolation: isolate;

  .grid-item1 {
    grid-row: 3 / span 2;
    grid-column: 3 / span 2;
    /* z-index: 2; */
  }
  .grid-item2 {
    grid-area: 2/2;
    grid-row: 2 / span 2;
    grid-column: 2 / span 2;
    /* z-index: 1; */
  }

  .grid-item3 {
    position: absolute;
    inset: 2rem;
    /* top: 0;
    right: 0;
    bottom: 0;
    left: 0; */
    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: end;
  align-items: last baseline; */
  /* place-items: center; */
  justify-content: center;
  align-content: center;

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