@import "./reset.css";

@import "./blocks/card.css";
@import "./blocks/taxonomy.css";
@import "./blocks/pill.css";
@import "./blocks/button.css";

:root {
  --space-base: 1rem;
  --space-xs: calc(var(--space-base) * 0.25);
  --space-sm: calc(var(--space-base) * 0.5);
  --space-md: calc(var(--space-base) * 1);
  --border: rgba(0, 0, 0, 0.1);
  --rounded-full: 100%;

  --text-base: 16px;
  --text-sm: 14px;
  --text-xs: 12px;
  --contrast: rgb(249, 105, 52);

  --font-sans: "inter", sans-serif;
}

body {
  width: 100%;
  height: 100vh;
  display: grid;
  place-items: center;
  font-family: var(--font-sans);
  font-size: var(--text-base);
}

.layout {
  width: 100%;
  height: 100%;
  padding: var(--space-sm);
  padding-inline: var(--space-sm);
  padding-block: var(--space-base);
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--space-xs);
}

.layout-header {
  display: flex;
  width: 100%;
  align-items: start;
  flex-direction: column;
  gap: var(--space-xs);
  padding-inline: var(--space-sm);
}

.layout-header-meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  width: 100%;
}

.layout h1 {
  font-size: var(--text-sm);
}

.layout h2 {
  font-size: var(--text-xs);
  color: var(--contrast);
}

.layout-header-count {
  font-size: var(--text-xs);
  color: gray;
}

.grid {
  padding: var(--space-sm);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xs);
  width: 100%;
}

@media (min-width: 640px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

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

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

@media (min-width: 1500px) {
  .grid {
    grid-template-columns: repeat(5, 1fr);
  }
}