@layer local{

/* #region Page */
.about-page {
  max-width: var(--max-text-width);
  margin-inline: auto;
  padding: var(--space-l) var(--space-m);
  line-height: var(--line-height-l);
}
.about-page section {
  margin-block: var(--space-3xl);
}
@media (prefers-reduced-motion: no-preference) {
  .about-page section {
    opacity: 0;
    transform: translateY(var(--size-xl));
    animation: fadeIn var(--time-l) ease forwards;
  }
  .about-page section:nth-child(2) { animation-delay: var(--time-xs); }
  .about-page section:nth-child(3) { animation-delay: var(--time-s); }
  .about-page section:nth-child(4) { animation-delay: var(--time-m); }
  @keyframes fadeIn {
    to {
      opacity: 1;
      transform: none;
    }
  }
}
@media (prefers-reduced-motion: no-preference) and (hover:hover){
  .about-figure img {
    opacity: 0;
    animation: fadeInImg var(--time-l) ease forwards;
  }
  @keyframes fadeInImg {
    to { opacity: 1; }
  }


}
/* #endregion */
/* #region Typography */
.about-page h1 {
  margin-block-end: var(--space-m);
  font-weight:var(--font-weight-xl);
}
.about-page h2 {
  position: relative;
  padding: var(--space-m) 0;
  font-weight:var(--font-weight-xl);
}
.about-page h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: var(--size-xl);
  height: var(--size-two);
  background: var(--text-accent);
  opacity: 0.4;
}
.about-page p + p {
  margin-block-start: var(--space-m);
}
.about-page aside {
  font-style: italic;
  font-size: var(--font-size-s);
  opacity: 0.8;
  margin-block-start: var(--space-s);
  text-align: right;
}
/* #endregion */
/* #region img */
.about-img-headshot{
  width:var(--size-4xl);
}
.about-img-guitar{
  height:var(--size-4xl);
}

.about-figure {
  margin-block: var(--space-l);
}
.about-figure img {
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-banner);
  margin-inline: auto;
}
.about-figure figcaption {
  margin-top: var(--space-xs);
  padding-top: var(--space-xs);
  font-size: var(--font-size-s);
  color: var(--text-main);
  font-style: italic;
  text-align: center;
}

/* #endregion */
}