.library__header {
  display: flex;
  flex-direction: column;
  gap: var(--inline-space-half);
}

.library__title {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.2;
  display: none;
}

.panel {
  --panel-width: 50ch;
  --panel-padding: 1em;

  inline-size: var(--panel-width);
  margin: calc(var(--navbar-height) - var(--block-space)) auto var(--block-space);
  max-inline-size: 100vw;
  padding: var(--panel-padding);

  body.library-collapsed & {
    margin-top: calc(var(--navbar-height) + var(--block-space));
  }

  @media (min-width: 120ch) {
    --panel-padding: 2em;

    box-shadow:
      0 0 0 1px oklch(var(--lch-always-black) / 0.02),
      0 .2em 1.6em -0.8em oklch(var(--lch-always-black) / 0.2),
      0 .4em 2.4em -1em oklch(var(--lch-always-black) / 0.3),
      0 .4em .8em -1.2em oklch(var(--lch-always-black) / 0.4),
      0 .8em 1.2em -1.6em oklch(var(--lch-always-black) / 0.5),
      0 1.2em 1.6em -2em oklch(var(--lch-always-black) / 0.6);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 0.8em;
  }
}


.panel--wide {
  --panel-width: 80ch;
}

.panel__button {
  inset-block-start: var(--block-space);
  inset-inline-start: var(--block-space);
  position: absolute;
}

.library {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--block-space-double);
  overflow-y: auto;
  padding: var(--block-space-double) var(--inline-space);
  margin-top: 40px;
}

.library__section {
  display: flex;
  flex-direction: column;
  padding: var(--block-space) var(--inline-space);
}

.library__section-title {
  font-size: 1.6rem;
  font-weight: 600;
}

.library__card {
  display: flex;
  flex-direction: column;
  gap: var(--block-space);
  padding-top: 2px;
  padding-bottom: 4px;
}

.library__videos {
  display: flex;
  flex-direction: column;
  gap: var(--block-space-double);
}



.library__iframe {
  position: relative;
  padding-block-start: var(--library-aspect, 56.25%);
}

.library__iframe > iframe {
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 0.8em;
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}

.library__actions {
  display: flex;
  gap: var(--inline-space);
}