@import "./../../common/base.css";

.ui_box {
  background-color: yellow;
}

.channel_list {
  display: flex;
  flex-flow: row wrap;
  list-style: "";
  padding-inline-start: 0;
  margin-block: 0;
  inline-size: 60%;
  margin-inline: auto;
  background-color: tomato;
}

.item {
  /* flex: 1; */
  display: flex;
  flex-flow: column nowrap;
  gap: 1em;
  /* min-inline-size: 150px; */
  box-sizing: border-box;
  padding-inline: 5px;
  flex-basis: 100%;

  @media (min-width: 480px) {
    flex-basis: 50%;
  }

  @media (min-width: 600px) {
    flex-basis: 33.333%;
  }

  @media (min-width: 880px) {
    flex-basis: 25%;
  }

  @media (min-width: 1000px) {
    flex-basis: 20%;
  }
}

.thumb {
  background-color: aqua;
  aspect-ratio: 1/1; /* 이미지 없을 때 같은 비율로 공간 유지할 수 있도록 */
  /* border: 1px solid currentColor; */
}

.image {
  width: 100%;
  inline-size: 100%;
  vertical-align: middle; /* 이미지 밑에 남는 자투리 없애기 */
}

.title {
  block-size: 40px;
}