.layout {
  container-type: inline-size;
  display: grid;
  gap: 1rem;
  width: 100%;
  max-width: 1200px;
  height: 100%;
  padding: 2rem;
  margin: 0 auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "header header"
    "aside main";
  grid-template-columns: 300px 1fr;
  align-content: end;
  @media (min-width: 1600px) {
    max-width: 1500px;
    align-content: center;
    main {
      /* aspect-ratio: 16 / 10; */
    }
  }
  @media (min-width: 1600px) and (max-aspect-ratio: 16/8.5) {
    main {
      aspect-ratio: 16 / 9;
    }
  }
  & > h1 {
    grid-area: heading;
    display: none;
    align-self: end;
    width: max-content;
  }
  @media (max-width: 900px) {
    height: initial;
    grid-template-areas:
      "header header"
      "aside aside"
      "main main";
    grid-template-columns: auto 1fr;
    & > h1 {
      display: block !important;
    }
    aside {
      justify-content: start;
      width: 100% !important;
      .glass.glass-intense {
        flex-grow: 1;
        display: flex;
        justify-content: center;
      }
    }
  }
  @media (max-width: 650px) {
    grid-template-areas:
      /*"header header"*/
      "aside aside"
      "main main";
    gap: 1rem;
    padding: 1rem;
    & > h1 {
      font-size: clamp(2.5rem, 10vw, 3.5rem);
      font-weight: 900;
      margin-block: 0.5rem;
    }
    aside {
      justify-content: start;
      width: 100% !important;
      .glass.glass-intense {
        flex-grow: 1;
        display: flex;
        justify-content: center;
        img {
          transform: scale(1.25);
          object-position: 1rem 3rem !important;
        }
      }
    }
  }
  @media (max-width: 400px) {
    aside {
      flex-direction: column !important;
      nav {
        ul {
          flex-direction: row !important;
          padding-block: 0.5rem;
        }
      }
    }
  }

  header {
    grid-area: header;
    display: flex;
    align-items: center;
    justify-content: end;
    padding: 1rem 2rem;
    /* width: max-content; */
    max-width: 100%;
    justify-self: end;
    align-self: start;
    gap: 2rem;
    z-index: 999;
    position: relative;

    @media (max-width: 900px) {
      position: fixed;
      top: 1rem;
      min-width: initial;
    }

    & > * {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }
  }

  aside {
    grid-area: aside;
    display: flex;
    flex-direction: column;
    gap: 1rem;

    h1 {
      display: none;
    }

    @media (max-width: 900px) {
      flex-direction: row-reverse;
      width: max-content;
      h1 {
        display: flex;
        flex-direction: column;
        align-self: end;
        font-size: 3rem;
        font-weight: 700;
        margin-left: auto;
      }
      img {
        max-width: 250px;
      }

      section:last-child {
        align-self: auto;
        nav {
          ul {
            flex-direction: column;
            @media (min-width: 400px) {
              padding-inline: clamp(0.5rem, 3vw, 1.5rem);
            }
          }
        }
      }
    }

    .glass.glass-intense {
      background-image: url("../img/avatar-bg-b.webp");
      background-position: center right;
      background-size: cover;
      background-repeat: no-repeat;
      flex-shrink: 0;
      .avatar {
        object-position: 1.25rem 2rem;
        filter: brightness(1.2)
          drop-shadow(0px 0px 8px rgba(47, 122, 125, 0.25));
        transform: inherit;
      }
    }

    section:last-child {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
  }

  main {
    @media (max-width: 900px) {
      height: initial;
      padding: clamp(0.5rem, 5vw, 2rem);
    }
    grid-area: main;
    position: relative;

    .content-wrapper {
      position: absolute;
      max-height: 100%;
      inset: clamp(1rem, 5vw, 3rem);
      overflow: auto;
      > div {
        scroll-behavior: smooth;
      }
      @media (max-width: 900px) {
        position: relative;
        inset: initial;
        > div {
          /* overflow: clip; */
        }
        h1 {
          /* display: none; */
        }
      }
    }
    section {
      margin-bottom: 3rem;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
  section {
    > p.lead {
      margin-left: 1em;
    }
    > h2 {
      padding-bottom: 0.25em;
      border-bottom: 1px solid var(--surface-color);
    }
    article {
      margin-top: clamp(.5rem, 5vw, 1.5rem);
      margin-bottom: clamp(.5rem, 5vw, 2.5rem);
      &:last-child {
        margin-bottom: 0;
      }
      &:first-of-type {
        margin-top: 0;
      }
      > h3:first-of-type {
        padding-left: 0.5em;
        border-left: 0.25em solid
          color-mix(in srgb, var(--accent-color) 30%, transparent);
        line-height: 1em;
      }
      > :not(h3:first-of-type) {
        margin-inline: clamp(0.25rem, 4vw, 1.5rem);
      }
      h4 {
        &:not(.example) {
          margin-block: 2rem 1rem;
        }
      }
      &.two-columns {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0rem;
        @media (max-width: 900px) {
          grid-template-columns: 1fr;
        }
      }
      &.three-columns {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 0rem;
        @media (max-width: 900px) {
          grid-template-columns: 1fr;
        }
    }
  }
}