@import "./reset.css";
@import "./theme.css";
@import "./base.css";

/* 카드 컴포넌트 */
.card {
  text-align: center;
  height: var(--size);
  width: 100%;
}

/* 버튼 기본 스타일 */
.button {
  background: var(--black);
  color: var(--white);
  border-radius: 50px;
  padding-block: var(--x-small-spacing);
  padding-inline: var(--small-spacing);
  font-size: var(--xx-small-text);
  font-weight: 500;
  margin: .3125rem;
  cursor: pointer;

  @media (min-width: 1024px) {
    font-size: var(--x-small-text);
  }

  &.more:hover{
    box-shadow: 0 0 0 1px var(--blue-400) inset;
  }
}

.price {
  background: transparent;
  color: var(--black);
  /* border의 두께에 따라 영역이 커져서 불편함. box-shadow로 영역 안쪽에 그림자를 주어 콘텐츠 위치에 영향을 주지 않도록 함. */
  /* border: 1px solid var(--black); */
  box-shadow: 0 0 0 1px var(--black) inset;

  &:hover {
    background: var(--black);
    color: var(--white);
  }
}

.btn-wrap {
  margin-block-start: var(--base-spacing);
}

/* 제목 스타일 */
.title {
  font-size: var(--large-text);
  font-weight: 800;
  padding-block-start: var(--large-spacing);
  margin-block-end: var(--small-spacing);

  @media (min-width: 1024px) {
    font-size: var(--extra-large-text);
    padding-block-start: var(--extra-large-spacing);
  }
}

/* 본문 스타일 */
.content {
  font-size: var(--base-text);
  font-weight: 600;
  line-height: var(--line-normal);
  margin-block-end: var(--x-small-spacing);

  @media (min-width: 1024px) {
    font-size: var(--medium-text);
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    gap: .3125rem
  }
}

/* 출시일 스타일 */
.date {
  font-size: var(--small-text);
  font-weight: 500;
  color: var(--gray);
}