@import '../../common/modern-reset.css';
@import '../../common/theme.css';
@import '/src/ui/components/avatar/avatar.css';

body {
  margin: 20px;
}

/* 피겨 요소 */
.img-avatar,
.state {
  /* position 초기화 (static) */
  position: initial !important;
}

/* 그리드 활용 */

.grid-box {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  border: 1px solid gray;
  padding: 2rem;
  place-items: center;

  .img-avatar {
    margin-bottom: 20px;
    margin-inline: auto;

    display: grid;
    img,
    figcaption {
      grid-area: 1 / 1 / 2 / 2;
    }
    figcaption {
      place-self: end;
    }
  }
}