.recordcontent {
  position: relative;
}
.recordcontent .graphic {
  width: 100%;
  max-width: var(--paragraph-width);
  padding-top: var(--half-line-space);
  padding-bottom: var(--half-line-space);
}
.recordcontent .graphic[full] {
  width: 100%;
  max-width: unset;
  text-align: left;
}
.recordcontent .graphic[wide] {
  width: calc(100% + ((100% - 2rem) / 6 * 2 + 2rem));
  max-width: unset;
  position: relative;
  left: calc(-1 * ((100% - 2rem) / 6 * 2 + 2rem));
}
.recordcontent .graphic[w1] {
  width: 3rem;
}
.recordcontent .graphic[w2] {
  width: 6rem;
}
.recordcontent .graphic[w3] {
  width: 9rem;
}
.recordcontent .graphic[w4] {
  width: 12rem;
}
.recordcontent .graphic[w5] {
  width: 15rem;
}
.recordcontent .graphic[w6] {
  width: 18rem;
}
.recordcontent .graphic[w7] {
  width: 21rem;
}
.recordcontent .graphic[w8] {
  width: 24rem;
}
.recordcontent .graphic[w9] {
  width: 27rem;
}
.recordcontent .graphic[w10] {
  width: 30rem;
}
.recordcontent .graphic[w11] {
  width: 33rem;
}
.recordcontent .graphic[w12] {
  width: 36rem;
}
.recordcontent .graphic[w13] {
  width: 39rem;
}
.recordcontent .graphic[w14] {
  width: 42rem;
}
.recordcontent .graphic[w15] {
  width: 45rem;
}
.recordcontent .graphic[w16] {
  width: 48rem;
}
.recordcontent .graphic[w17] {
  width: 51rem;
}
.recordcontent .graphic[w18] {
  width: 54rem;
}
.recordcontent .graphic[w19] {
  width: 57rem;
}
.recordcontent .graphic[w20] {
  width: 60rem;
}
.recordcontent .graphic[r16_9] {
  aspect-ratio: 16/9;
}
.recordcontent .graphic[r4_3] {
  aspect-ratio: 4/3;
}
.recordcontent .graphic[r1_1] {
  aspect-ratio: 1/1;
}

@media (max-width: 900px) {
  .recordcontent .graphic[wide] {
    width: 100%;
    max-width: unset;
    text-align: left;
    left: 0;
  }
}

.recordcontent .gallery {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  flex-direction: row;
  gap: var(--line-height) var(--vertical-gap);
}
.recordcontent .gallery.wide {
  max-width: 100%;
}
.recordcontent .gallery .graphic {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  padding-top: 0;
  padding-bottom: 0;
}

.recordcontent .image > img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 75vh;
}

.recordcontent .youtube {
  max-height: calc(75vh + var(--line-space));
}
.recordcontent .youtube > .youtube-frame-wrapper {
  display: block;
  width: 100%;
  object-fit: contain;
  aspect-ratio: inherit;
}
.recordcontent .youtube[r16_9] > .youtube-frame-wrapper {
  margin: 0 auto;
  max-width: calc(75vh * (16 / 9));
}
.recordcontent .youtube > .youtube-frame-wrapper > iframe {
  display: block;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  aspect-ratio: inherit;
}
.recordcontent .image[full] img,
.recordcontent .youtube[full] iframe {
  margin: unset;
}

.recordcontent .code {
  width: var(--paragraph-width);
  padding: 0.65rem;
  background: var(--bgtl);
  border-radius: 0.65rem;
  margin-top: var(--half-line-space);
  margin-bottom: var(--half-line-space);
}
.recordcontent .code > pre {
  overflow-x: auto;
  margin: 0;
  word-break: break-all;
  word-wrap: break-word;
  padding: 0;
}
.recordcontent .code > pre,
.recordcontent .code > pre span {
  font-family: var(--monospace);
  font-size: 0.9rem;
  line-height: calc(var(--line-height) * 0.75);
}

@media (max-width: 900px) {
  #log > .content .side,
  #work > .content .side {
    margin-bottom: calc(var(--line-height) * 3);
  }
}