.article__heading {
  grid-column: 2 / -2;
  font-size: var(--fs-xl);
  line-height: 1.5;
  margin: 1em 0;
  font-weight: 700;
}

.article__section {
  display: grid;
  grid-row: auto;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  font-size: 1.6rem;
  line-height: 1.5;
  
  color: var(--clr-section, var(--clr-black));
  background-color: var(--clr-sectionbg, transparent);
  
  margin: var(--m-column) 0 0 0;

  & > * {
    grid-column: 2 / -2;
  }

  &[style] {
    padding: var(--m-column) 0;
  }
  &[style]:not(:first-child) {
    grid-column: 2 / -2;    
  }


  & > *:first-child {
    margin-top: 0;
  }

  &:last-of-type:not(:first-child) {
    margin-bottom: calc(3 * var(--m-column));
  }
  
  &:first-of-type {
    padding-top: calc(2.5 * var(--m-column));    
    margin-top: 0;

    &[style] {
      padding-bottom: calc(var(--m-column)/ 2);
      & > *:last-child {
        margin-bottom: 0;
      }
    }
  }

  & a:not(.youtube-container) {
    color: var(--clr-section, var(--clr-black));
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;

    &:hover {
      text-decoration-color: var(--clr-section, var(--clr-black));
    }
  }

  & figure {
    margin: 0;
  }

  & figcaption {
    font-size: 1.5rem;
    margin: var(--m-m) 1em 1em 1em;
  }

  & img {
    display: block;
    width: 100%;
    height: auto;
  }

}

.article__section:has(figure) {
  padding: 0;

  & + .article__section:has(figure) {
    padding-top: calc(var(--m-column) / 2);
  }
}

.article__section-l {
  

  & > * {
    grid-column: 1 / -1;
  }


}

.article__heading-h1 {
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.1;
  margin: 0;

  & + * {
    margin-top: 2em;
  }
}

.article__heading-h2 {
  font-family: var(--ff-heading);
  font-size: 2.4rem;
  line-height: 1.15;
  margin: 1em 0;
  font-weight: 600;
}

.article__heading-h3 {
  font-size: 1.8rem;
  line-height: 1.5;
  margin: 1em 0;
  font-weight: 600;

  &:has(+ ul) {
    margin-bottom: 0.6em;
  }
}


.exhibition__group {
  font-family: var(--ff-heading);
  letter-spacing: var(--ls-l);
  font-size: var(--fs-l);
  line-height: 1.2;
  margin: 0;
  font-weight: 700;
}

.exhibition__title {
  font-family: var(--ff-heading);
  letter-spacing: var(--ls-l);
  font-size: var(--fs-l);
  line-height: 1.1;
  margin: 0 0 0.4em 0;
  font-weight: 600;
}

.exhibition__tag {
  font-size: var(--fs-s);
  line-height: 1.2;
  margin: 0;
  color: var(--clr-grey-600);
  font-weight: 600;

  & + * {
    margin-top: 0.1em;
  }
}

.exhibition__date {
  font-size: var(--fs-m);
  line-height: 1.2;
  margin: 0;
  font-weight: 400;
  
}

#tags {
  scroll-margin-top: 4em;                                                                                                          
}

.list-tags {
  margin-bottom: 1em;
  & ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 2.5em 1em;
    flex-wrap: wrap;
  }

  & a {
    font-size: 1.6rem;    
    background: var(--clr-grey-100);
    padding: 0.4em 1.2em;
    border-radius: 50vw;    
    color: var(--clr-grey-500);
    font-weight: 500;
    &:hover, &.current {
      background: var(--clr-black);
      color: var(--clr-white);
    }
  }

  @media (min-width: 1300px) {
    & ul {
      justify-content: start;
    }
    margin-left: 23.80952381%;
  }
}

.list__container {
  
  color: var(--clr-fg);
  margin: calc(var(--m-column) / 2) var(--m-column);
  
  & a {
    color: var(--clr-fg);
    text-decoration: none;
  }

  & > ul {
    list-style: none;
    margin: calc(var(--m-column) / 2) 0;
    padding: 0;
    
    --n-columns: 1;  
    display: grid;
    grid-template-columns: repeat(var(--n-columns), minmax(0, 1fr));
    gap: var(--m-column);
  
  }

  & img {
    display: block;
    width: 100%;
    aspect-ratio: 4/3;    
    margin: 0 0 1.5em 0;
  }

  & + .list__container {
    margin-top: calc(var(--m-column) * 1.5);
  }

  &:last-of-type {
    margin-bottom: calc(2 * var(--m-column));
  }
}



/* Medium */
@media (min-width: 800px) {
  .article__section {

    margin-top: calc(var(--m-column) / 2);
    
    & > * {
      grid-column: 4 / span 7;
    }

    
    &[style]:not(:first-child) {
      margin-top: calc(var(--m-column) / 2);
      padding: calc(var(--m-column) / 1.5) 0;
      grid-column: 4 / span 7;
      & > * {
        grid-column: 2 / -2;
      }
    }
    
    &.align-w {
      & > * {
        grid-column-start: 2;
      }
    }
  }

  .article__section-l {
    & > * {
      grid-column: 2 / -2;
    }
  }

  
}

/* L */
@media (min-width: 1024px) {

  .article__heading-h2 {
    font-size: 3.2rem;
  }

  .article__heading-h3 {
    font-size: 2.0rem;
  }

  .article__section {

    margin-top: calc(var(--m-column) / 1.5);
    font-size: 1.8rem;

    & > * {
      grid-column: 7 / span 10;
    }
    
    &[style]:not(:first-child) {
      grid-column: 7 / span 10;
      & > * {
        grid-column: 2 / -2;
      }
    }

    &.align-w {
      & > * {
        grid-column-start: 4;
      }
    }

    &.align-e {
      & > * {
        grid-column-start: 12;
      }
    }
  }

  .article__section-l {
    & > * {
      grid-column: 3 / -3;
    }
  }

  .list__container {
    & ul {
      --n-columns: 2;  
    }
    
  }

}

@media (min-width: 1600px) {
  .list__container {

    & ul {
      --n-columns: 3;  
    }

  }
}


ul:has(a.download-link) {
  padding-left: 1.8em;
  margin: 0 0 1em 0;
  & li + li {
    margin-top: 0.4em;
  }
}

li:has(a.download-link) {                                                                                                         
  list-style: none;           

  & a.download-link {
    &::before {
      content: url("/assets/ico-download-23594289.svg");                                                                                               
      display: inline-block;                                                                                                          
      width: 1.2em;                                                                                                                     
      height: 1.2em;                                                                                                                          
      align-self: center;
      position: absolute;
      margin-left: -1.7em;
      margin-top: 0.2em;
    }
    &::after {
      content: " " attr(data-desc);
      opacity: 0.6;
      font-size: 0.8em;
      display: inline-block;
      flex-shrink: 0;
      text-decoration: none;
      margin-left: 0.4em;
    }

    
  }
}