.footer {
  padding: 5rem 0;
}

.footer .truncate {
  display: none;
}

.footer-blog-header {
  background-color: var(--border-gray);
  font-size: 75%;
  font-weight: bold;
  padding: 0.5rem;
  text-align: left;
  text-transform: uppercase;
}

.footer-blog-header .container {
  align-items: center;
  display: grid;
  grid-template-columns: auto auto;
  gap: 1rem;
}

.footer-blog-header .right {
  align-items: center;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 1rem;
}

.footer-blog-header a {
  color: var(--dark-gray);
}

.footer-blog {
  background-color: var(--faint-gray);
  margin-bottom: 2rem;
  padding: 1rem 0;
}

.footer-blog .container {
  display: grid;
  grid-template-columns: auto;
  gap: 1rem;
  position: relative;
}
.footer-blog .container::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  position: absolute;
  left: 1rem;
  border-bottom: 5px solid var(--faint-gray);
  margin-top: -5px;
  top: -1rem;
}

.footer-blog img {
  display: block;
}

.footer-blog-content {
  line-height: 1.5;
  padding: 0.5rem 0;
}

/* The blog-post heading is an <h3> for the document outline (the visible
   heading run otherwise skips from h2 to h4), held at the h4 size it has
   always rendered at so promoting the tag changed no pixels. */
.footer-blog-content h3 {
  font-size: 112.5%;
  margin-top: 0;
  margin-bottom: 0;
}

.footer-blog-content p {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.footer-nav {
  font-size: 75%;
}

.footer .inline-list {
  justify-content: center;
  margin-bottom: 0.5rem;
}

.footer-links {
  margin: 1rem 0;
}
/* 24px-minimum touch targets (WCAG 2.5.8): pad each link to ~26px tall and
   pull the li margins in so the visible density stays put. */
.footer-links .inline-list li {
  margin: 0 0.25em;
}
.footer-links .inline-list a {
  display: inline-block;
  padding: 0.375rem 0.25rem;
}
.footer-links a {
  color: var(--dark-blue);
  font-weight: 700;
}
.footer-links a:hover,
.footer-links a:active {
  color: var(--light-blue);
}

.footer-copyright {
  text-align: center;
  margin: 1rem 0;
}

@media only screen and (min-width: 480px) {
  .footer-blog-content h3 {
    font-size: 125%;
  }
}

@media only screen and (min-width: 540px) {
  .footer-blog .container {
    grid-template-columns: 120px auto;
  }
}

@media only screen and (min-width: 640px) {
  .footer .truncate {
    display: inline;
  }

  .footer-blog .container {
    grid-template-columns: 240px auto;
  }
}

@media only screen and (min-width: 720px) {
  .footer-blog .container {
    grid-template-columns: 320px auto;
  }
}