.homepage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  grid-template-areas:
    "about posts"
    "projects posts";
  gap: 2rem;
  padding-top: var(--masthead-section-spacing);
}

.homepage > section {
  border-top: 1px solid var(--color-divider);
}

.homepage > section > h2 {
  margin-top: var(--section-heading-spacing);
}

.about {
  grid-area: about;
}

.latest-posts {
  grid-area: posts;
}

.projects {
  grid-area: projects;
}

.about > h2 a,
.latest-posts > h2 a {
  color: var(--color-heading);
}

.about > h2 a:hover,
.about > h2 a:focus-visible,
.latest-posts > h2 a:hover,
.latest-posts > h2 a:focus-visible {
  color: var(--color-link-hover);
}

.section-link {
  display: block;
  width: fit-content;
  margin-top: 0.75rem;
  margin-inline-start: auto;
  text-align: right;
  text-decoration: underline;
}

.section-link::before {
  content: "\2192  ";
}

.link-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0;
  list-style: none;
}

.contact-link,
.contact-link img,
.contact-icon {
  display: block;
}

.contact-icon {
  width: 1.5rem;
  height: 1.5rem;
  background: var(--color);
  mask: var(--icon) center / contain no-repeat;
}

.contact-link:hover .contact-icon,
.contact-link:focus-visible .contact-icon {
  background: var(--color-link-hover);
}

address {
  font-style: normal;
}

.project h3 {
  margin-block: 0;
}

.project h3 a {
  display: inline-flex;
  align-items: center;
}

.project h3 img {
  width: 1em;
  height: 1em;
  margin-inline-end: 0.375rem;
}

.project-link::after {
  align-self: flex-start;
  margin-block-start: 0.1em;
}

.project p {
  margin-block: 0.25rem 0;
}

@media (max-width: 44rem) {
  .homepage {
    grid-template-columns: 1fr;
    grid-template-areas:
      "about"
      "posts"
      "projects";
  }
}