.record {
  display: block;
}
.record:has(a:hover) a,
.record:has(a:hover) a > * {
  color: var(--fgt) !important;
}
.record:has(a:hover) img {
  filter: grayscale(100%) brightness(50%) sepia(100%)
    hue-rotate(calc(288deg - 50deg));
}
.record:has(a:hover) .tag {
  border-color: var(--fgt);
  color: var(--fgt);
  cursor: pointer;
}

#logs-index .records {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: var(--line-height);
  column-gap: 2rem;
}
#logs-index .record {
  max-width: var(--paragraph-width);
}
#logs-index .record a {
  display: block;
}
#logs-index .record .image img {
  max-width: 100%;
  max-height: 50vh;
}
#logs-index .record .title .info {
  word-break: keep-all;
  white-space: nowrap;
}
#logs-index .record .content a {
  color: var(--gray3);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
@media (max-width: 1200px) {
  #logs-index .records {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 900px) {
  #logs-index .records {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  #logs-index .records {
    grid-template-columns: 1fr;
  }
}

.contentwrapper.gallery {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  flex-direction: row;
  gap: var(--line-height) 2rem;
}
.contentwrapper.gallery .child {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  width: 18rem;
}
.contentwrapper.gallery .child[w1] {
  width: 3rem;
}
.contentwrapper.gallery .child.w1 {
  width: 3rem;
}
.contentwrapper.gallery .child[w2] {
  width: 6rem;
}
.contentwrapper.gallery .child.w2 {
  width: 6rem;
}
.contentwrapper.gallery .child[w3] {
  width: 9rem;
}
.contentwrapper.gallery .child.w3 {
  width: 9rem;
}
.contentwrapper.gallery .child[w4] {
  width: 12rem;
}
.contentwrapper.gallery .child.w4 {
  width: 12rem;
}
.contentwrapper.gallery .child[w5] {
  width: 15rem;
}
.contentwrapper.gallery .child.w5 {
  width: 15rem;
}
.contentwrapper.gallery .child[w6] {
  width: 18rem;
}
.contentwrapper.gallery .child.w6 {
  width: 18rem;
}
.contentwrapper.gallery .child[w7] {
  width: 21rem;
}
.contentwrapper.gallery .child.w7 {
  width: 21rem;
}
.contentwrapper.gallery .child[w8] {
  width: 24rem;
}
.contentwrapper.gallery .child.w8 {
  width: 24rem;
}
.contentwrapper.gallery .child[w9] {
  width: 27rem;
}
.contentwrapper.gallery .child.w9 {
  width: 27rem;
}
.contentwrapper.gallery .child[w10] {
  width: 30rem;
}
.contentwrapper.gallery .child.w10 {
  width: 30rem;
}
.contentwrapper.gallery .child[w11] {
  width: 33rem;
}
.contentwrapper.gallery .child.w11 {
  width: 33rem;
}
.contentwrapper.gallery .child[w12] {
  width: 36rem;
}
.contentwrapper.gallery .child.w12 {
  width: 36rem;
}
.contentwrapper.gallery .child[w13] {
  width: 39rem;
}
.contentwrapper.gallery .child.w13 {
  width: 39rem;
}
.contentwrapper.gallery .child[w14] {
  width: 42rem;
}
.contentwrapper.gallery .child.w14 {
  width: 42rem;
}
.contentwrapper.gallery .child[w15] {
  width: 45rem;
}
.contentwrapper.gallery .child.w15 {
  width: 45rem;
}
.contentwrapper.gallery .child[w16] {
  width: 48rem;
}
.contentwrapper.gallery .child.w16 {
  width: 48rem;
}
.contentwrapper.gallery .child[w17] {
  width: 51rem;
}
.contentwrapper.gallery .child.w17 {
  width: 51rem;
}
.contentwrapper.gallery .child[w18] {
  width: 54rem;
}
.contentwrapper.gallery .child.w18 {
  width: 54rem;
}
.contentwrapper.gallery .child[w19] {
  width: 57rem;
}
.contentwrapper.gallery .child.w19 {
  width: 57rem;
}
.contentwrapper.gallery .child[w20] {
  width: 60rem;
}
.contentwrapper.gallery .child.w20 {
  width: 60rem;
}
.contentwrapper.gallery .child a {
  display: block;
  width: 100%;
}
.contentwrapper.gallery .child img {
  display: block;
  width: 100%;
  object-fit: contain;
}
.contentwrapper.gallery .child .youtube-frame-wrapper {
  display: block;
  width: 100%;
  object-fit: contain;
  aspect-ratio: 16/9;
}
.contentwrapper.gallery .child.r4_3 .youtube-frame-wrapper {
  aspect-ratio: 4/3;
}
.contentwrapper.gallery .child.r1_1 .youtube-frame-wrapper {
  aspect-ratio: 1/1;
}
.contentwrapper.gallery .child .youtube-frame {
  display: block;
  width: 100%;
  height: 100%;
}