body {
  background-color: #eff4ff;
  color: black;
  font-family: Verdana;
  font-size: 15px;
}

img {
  max-width: 100%;
  height: auto;
}

.text {
  line-height: 0.3;
}

.icon {
  float: left;
  margin-right: 10px;
}

.outline {
  color: white;
  text-shadow:
    -1px -1px 0 black,
    1px -1px 0 black,
    -1px 1px 0 black,
    1px 1px 0 black;
}

.drawings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px
}

.drawings img {
  width: 100%;
  max-width: 200px;
  display: block;
  box-sizing: border-box;
}

.drawings a {
  justify-self: start;
  align-self: start;
}

.border {
  border: 8px solid transparent;
  background: transparent;
}

.border:hover {
  border: 8px solid #d4d8ef;
  background: #d4d8ef;
}

@media (max-width: 425px) {
  .drawings img {
    max-width: 155px;
  }
}

@media (max-width: 425px) {
  .drawings {
    grid-template-columns: repeat(2, 1fr);
  }
}