selfdefined/css/base.css

@import url("https://fonts.googleapis.com/css?family=Inconsolata|Noto+Serif+KR");
@import url("https://use.typekit.net/qlo3dpu.css");
body {
  font-family: Inconsolata, Helvetica, sans-serif;
  font-size: 20px;
  background: #e5ffe5; }

h1 {
  font-family: "Noto Serif KR", Georgia, serif;
  font-weight: 200;
  border-bottom: 0.25em #ffffff solid; }

h2, h3 {
  font-family: "Noto Serif KR", Georgia, serif;
  font-weight: 700; }

li {
  list-style: none;
  padding-bottom: .5em;
  text-transform: capitalize; }

.grid {
  display: grid;
  grid-template-columns: repeat(4, [col] 1fr [col]);
  grid-template-rows: fit-content, fit-content, auto;
  grid-row-gap: 2em;
  grid-column-gap: 1em; }

@media screen and (min-width: 200px) {
  #title, #description, #summary {
    grid-column: span 4; }
  body {
    padding: 1em; }
  .list, .item {
    grid-column: span 4; }
  h1 {
    font-size: 3em; }
  h2 {
    font-size: 1.25em; } }

@media screen and (min-width: 600px) {
  body {
    padding: 3em; }
  #title, #description, #summary {
    grid-column: span 2; }
  .item {
    grid-column: span 2; }
  h1 {
    font-size: 4em; }
  h2 {
    font-size: 1.3em; } }

@media screen and (min-width: 1024px) {
  #title {
    grid-column: 1 / span 1;
    grid-row: 1; }
  #description {
    grid-column: 2 / span 1;
    grid-row: 1; }
  #summary {
    grid-column: 1 / span 1;
    grid-row: 2; }
  .list {
    grid-row: span 3;
    grid-column: span 1; } }