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

a {
  display: block;
  margin-block: 1rem;
}

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

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

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

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

/* 그리드 박스 */
.grid-box {
  border: 1px solid var(--green);
  background-color: var(--silver);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 50px);
  position: relative;
  isolation: isolate;

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

  .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: end;
  align-content: center; */

  /* 위 두 줄을 축약하면 아래와 같이 가능하다 */
  /* place-content: center end; */

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

    /* 위 두 줄을 축약하면 아래와 같이 가능하다 */
    place-self: center;
  }
}