.article-title {
  font-family: 'Gloock', serif;
  font-size: 2.0rem;
  font-weight: 500;
  /* line-height: 2.2rem; */
  padding-bottom: 2vw;
}

.section-title {
  font-family: 'Gloock', serif;
  font-size: 1.6rem;
  font-weight: 500;
  /* line-height: 2.2rem; */
  padding-bottom: 2vw;
}

.section-subtitle {
  font-family: 'Gloock', serif;
  font-size: 1.4rem;
  font-weight: 500;
  /* line-height: 2.2rem; */
  padding-top: 6vw;
  padding-bottom: 2vw;
}

.blog-index-title {
  font-family: 'Gloock', serif;
  font-size: 1.25rem;
  font-weight: 500;
}

.blog-index-subtitle {
  font-size: 1rem;
}

.section {
  padding-top: 4vw;
  padding-bottom: 2vw;
}

figcaption {
  font-size: 0.75rem;
}

a {
  color: inherit;
}

dd {
  margin-inline-start: 20px;
}

dd ul {
  padding-left: 20px;
}

/* Small screen */
@media screen and (max-width: 600px) {

  .article-title {
    font-family: 'Gloock', serif;
    font-size: 1.6rem;
    font-weight: 500;
    padding-bottom: 2vw;
  }

  .section-title {
    font-size: 1.4rem;
    font-weight: 500;
    padding-bottom: 2vw;
  }

  .section-subtitle {
    font-size: 1.2rem;
    font-weight: 500;
    padding-bottom: 2vw;
  }

  .section {
    padding-top: 8vw;
    padding-bottom: 2vw;
  }
}

.padded-img {
  padding: 10px;
}

/* https://stackoverflow.com/questions/43806515/position-svg-elements-over-an-image */
.img-overlay-wrap {
  position: relative;
  display: inline-block; /* shrinks container to image size */
  /* transition: transform 150ms ease-in-out; */
}
.img-overlay-wrap img { /* optional, for responsiveness */
  display: block;
  max-width: 100%;
  height: auto;
}
.img-overlay-wrap i {
  position: absolute;
  top: 20px;
  right: 20px;
}