@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;
  padding: 4em;
  background: #e5ffe5; }

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

h2 {
  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-row-gap: 2em;
  grid-column-gap: 1em;
  grid-gap: .5em; }

@media screen and (min-width: 200px) {
  .item {
    grid-column: span 4; }
  h1 {
    font-size: 2em; }
  h2 {
    font-size: 1em; } }

@media screen and (min-width: 600px) {
  .item {
    grid-column: span 2; }
  h1 {
    font-size: 4em; }
  h2 {
    font-size: 1.5em; } }

@media screen and (min-width: 1024px) {
  .item {
    grid-column: span 1; } }