body {
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
    color:#333
}
header {
    position:fixed;
    left:0;
    top:0;
    margin:0 0 10px 0;
    padding:10px;
    background:rgba(148, 176, 160, 0.9);
    width:100%;
}
h1 {
    color:#fff;
    margin:0;
    font-size:36px;
}
header a img {
    width:32px;
    height:32px;
    position:absolute;
    top:20px;
    right:30px;
}
main {
    column-gap: 10px;
    padding: 10px;
    column-count: 5;
    padding:72px 0 60px 0;
}
@media (max-width: 1216px) {
    main {
        column-count: 4;
    }
}
@media (max-width: 1024px) {
    main {
        column-count: 3;
    }
}
@media (max-width: 768px) {
    main {
        column-count: 2;
    }
}
img {
  width: 100%;
  margin: 0 0 8px 0;
  box-sizing: border-box;
  break-inside: avoid;
}
footer {
    position:fixed;
    left:0;
    bottom:0;
    width:100%;
    padding:20px;
    background:rgba(255, 255, 255, 0.9);
}
a {
    color:#148;
    text-decoration:none;
}
dl {
  display: grid;
  grid-gap: 4px 16px;
  grid-template-columns: max-content;
  margin:0;
}
dd {
  margin: 0;
  grid-column-start: 2;
}