@import '../../common/modern-reset.css';
@import '../../common/theme.css';
@import '../../common/a11y.css';
@import '../../common/base.css';

body {
  margin: 20px;
}

h1,
h2 {
  margin-block: 20px;
}

/* 카드 아이템 */
.card-item {
  container-type: inline-size;
  container-name: item;
}

/* 카드 컴포넌트 */
.card {
  border: 1px solid var(--pastel-gray);
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 0 8px 1px var(--pastel-gray);
  display: grid;
  gap: 20px;

  /* 미디어 쿼리 */
  @container item (min-width:576px) {
    grid-template-columns: 2fr 3fr;
    /* row는 auto (생략) */
    grid-template-areas:
      'thumbnail subject'
      'thumbnail content'
      'thumbnail more';

    .thumbnail {
      grid-area: thumbnail;
    }

    .subject {
      grid-area: subject;
    }

    .content {
      grid-area: content;
    }

    .area {
      grid-area: more;
    }
  }

  .subject {
    font-weight: 600;
    font-size: 1.5rem;
  }

  .thumbnail {
    /* 원본 이미지 크기를 3 / 2 비율로 조절하고 위치 설정 */
    img {
      aspect-ratio: 3/2;
      width: 100%;
      object-fit: cover;
      object-position: 50% 0;
    }
  }

  .content {
    line-height: 1.5;
  }

  .more {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: var(--pastel-blue);
    color: var(--white);
    padding: 1em;
  }
}

/* 카드 리스트 */
.card-list {
  display: grid;

  @media (min-width: 768px) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media (min-width: 1280px) {
    grid-template-columns: repeat(4, 1fr);
  }
}