/* Om mig / kontakt i helskärm. Klick var som helst stänger (utom på länkar). */

.about {
  position: fixed;
  inset: 0;
  z-index: 46;                      /* under logga och meny, så menyn syns */
  display: grid;
  grid-template-columns: var(--about-columns);
  background: var(--about-bg);
  color: var(--about-fg);
  cursor: pointer;
  overflow-y: auto;
  opacity: 0;
  transition: opacity var(--fade) ease;
}
.about.is-open { opacity: 1; }
.about[hidden] { display: none; }
.about.no-image { grid-template-columns: 1fr; }

.about-image {
  margin: 0;
  order: var(--about-image-order);
  height: 100vh;
  position: sticky;
  top: 0;
}
.about-image img { width: 100%; height: 100%; object-fit: cover; object-position: var(--about-image-position); }
.no-image .about-image { display: none; }

.about-body {
  display: flex;
  align-items: center;
  padding: calc(var(--logo-top) + 80px) var(--about-padding) var(--about-padding);
  min-height: 100vh;
}
.no-image .about-body { justify-content: center; }
.about-inner { max-width: var(--about-max-width); }

.about-name {
  font-size: var(--about-title-size);
  font-weight: var(--about-title-weight);
  letter-spacing: var(--nav-letter-spacing);
  text-transform: var(--nav-transform);
  line-height: 1.15;
  margin: 0 0 .3em;
}
.about-subtitle {
  margin: 0 0 2em;
  font-size: var(--about-text-size);
  opacity: .6;
}
.about-subtitle:empty { display: none; }
.about-text { font-size: var(--about-text-size); line-height: var(--about-line-height); }
.about-text p { margin: 0 0 1em; }

.about-contact {
  list-style: none;
  margin: 2.2em 0 0;
  padding: 0;
  display: grid;
  gap: .45em;
  font-size: var(--about-text-size);
}
.about-contact a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  cursor: pointer;
}
.about-contact a:hover { opacity: .6; }
.about-contact .label {
  display: inline-block;
  min-width: 7.5em;
  padding-right: .8em;
  font-size: .8em;
  letter-spacing: var(--nav-letter-spacing);
  text-transform: var(--nav-transform);
  opacity: .5;
}

html.about-open, html.about-open body { overflow: hidden; }

@media (max-width: 800px) {
  .about { grid-template-columns: 1fr; }
  .about-image { height: 55vh; position: static; order: 0; }
  .about { align-content: start; }
  .about-body { display: block; min-height: 0; padding: 32px 20px 60px; }
}