@font-face {
  font-family: Pretendard;
  src: url(fonts/Pretendard-Regular.otf);
}

html, head, body, div, ul, li, img {
  padding: 0;
  margin: 0;
}

body {
  width: 100%;
  font-family: Pretendard;
  text-align: center;
  font-size: 14px;
  line-height: 150%;
  color: #458758;
  background: linear-gradient(180deg, #F0EAE6 0%, #FFFAF6 100%);
}

h1 {
  margin-top: 5%;
  margin-bottom: 55px;
}

h1 img {
  width: 210px;
}

.button {
  padding: 4px 8px;
  font-size: 12px;
  color: black;
  text-decoration: none;
  background-color: white;
  border-radius: 40px;
}

.button + .button {
  margin-left: 20px
}

.screenshots {
  display: grid;
  margin: auto;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 14px;
  list-style: none;
  justify-content: center;
  margin-top: 75px;
}

li img {
  width: 224px;
}

@media screen and (min-width: 490px) {
  .screenshots {
    width: 470px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (min-width: 940px) {
  .screenshots {
    width: 940px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}