@import 'fonts.css';
@import 'utils.css';

:root {
  --color-accent: #7c19ee;
  --color-pink: #f2eafd;
  --color-white: #ffffff;
  --color-light: #fafaf9;
  --color-black: #20293a;
  --color-grey: #394150;
  --color-grey-light: #e5eaf0;

  --font-family-base: 'Sora', sans-serif;

  --border-radius: 10px;
  --shadow: 8px 8px 20px 0px rgba(85, 85, 85, 0.08);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-family-base);
  font-weight: 300;
  font-size: 14px;
  color: var(--color-black);
}

h2 {
  font-weight: 700;
  font-size: 18px;
}

.card {
  width: 368px;
  margin-inline: auto;
  margin-top: 164px;
  background-color: var(--color-white);
  box-shadow: var(--shadow);
  border-radius: var(--border-radius);

  & .card__header {
    display: grid;
    gap: 16px;
    margin-bottom: 16px;
  }

  & .card__image {
    border-radius: var(--border-radius);
  }

  & .card__body {
    display: grid;
    gap: 6px;
  }

  & .card__footer {
    border-top: 1px solid var(--color-grey-light);
    font-size: 12px;
    font-weight: 400;
  }
}

.tag-list {
  display: inline-flex;
  list-style-type: none;
  flex-wrap: wrap;

  & .tag-list__item {
    font-size: 10px;
    font-weight: 700;
    color: var(--color-accent);
    background-color: var(--color-pink);
    padding-inline: 16px;
    padding-block: 6px;
    border-radius: 25px;
  }
}