@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-display: swap;
  src: url("/assets/Lora-VariableFont_wght-b6be2f22.ttf") format('truetype-variations');
}

@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-display: swap;
  src: url("/assets/Lora-Italic-VariableFont_wght-559e9928.ttf") format('truetype-variations');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  src: url("/assets/Inter-VariableFont_opsz,wght-c6876acd.ttf") format('truetype-variations');
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-display: swap;
  src: url("/assets/Inter-Italic-VariableFont_opsz,wght-69d93774.ttf") format('truetype-variations');
}

:root {
  --clr-white: #fff;
  --clr-black: #2d2d2d;
  --clr-light-yellow: #FFFCF6;
  --clr-ribe: #87161F;
  
  --clr-bg: var(--clr-light-yellow);
  --clr-fg: var(--clr-black);

  --clr-menu: var(--clr-bg);
  --clr-logo: #1d1d1b;

  --clr-red: #e1200b;

  --clr-grey-100: #f4f4f5;
  --clr-grey-200: #e4e4e7;
  --clr-grey-300: #d4d4d8;
  --clr-grey-400: #a1a1aa;
  --clr-grey-500: #71717a;
  --clr-grey-600: #52525b;
  --clr-grey-700: #17176d;
  --clr-grey-750: #2e2f31;
  --clr-grey-800: #28292A;

  --clr-light-blue: #D0E0EE;
  --clr-occasion: var(--clr-light-blue);

  --clr-border: var(--clr-grey-300);
  --clr-action: #3c85c6;
  --clr-error: var(--clr-red);
  

  --ff-base: 'Lora', serif;
  --ff-alt: 'Inter', sans-serif;

  --n-columns: 15;

  --m-column: calc(100vw / var(--n-columns));
  --m-menu-height: 200px;

  /*--fs-xxl: clamp(4.2rem, 6vw + 1rem, 8rem);*/
  --fs-xxl: clamp(2.8rem, 4.8vw + 0.498rem, 5.6rem);
  --fs-xl: clamp(2.4rem, 1.37vw + 1.742rem, 3.2rem);
  --fs-l: clamp(2rem, 0.685vw + 1.671rem, 2.4rem);
  --fs-m: clamp(1.8rem, 0.343vw + 1.636rem, 2rem);
  --fs-s: clamp(1.4rem, 0.685vw + 1.071rem, 1.8rem);
  --fs-xs: clamp(1.4rem, 0.685vw + 1.071rem, 1.6rem);

  --ms-xs: .236em;
  --m-s: .345984em;
  --m-m: .786096em;
  --m-l: 1em;
  --m-xl: 1.618em;

  font: 10px/1.3 var(--ff-base);
}

.turbo-progress-bar {
  height: 5px;
  background-color: var(--clr-ribe);
}


body {
  background-color: var(--clr-bg);
  color: var(--clr-fg);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 100svh;
  -webkit-font-smoothing: antialiased;
}

header,
footer {
  flex-grow: 0;  
  font-family: var(--ff-alt);
}

a {
  color: currentColor;
}


header {
  z-index: 100;
  position: absolute;

  
  &.clr__negative {
    /*text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);*/
    --clr-fg: var(--clr-white);

    & svg {
      /*filter: drop-shadow(0px 0px 3px rgb(0 0 0 / 0.2));*/
      fill: var(--clr-fg);
    }
  }
}

strong {
  font-weight: 400; 
  font-variation-settings: 'wght' 700;
}

main {
  flex-grow: 1;
}

footer {  
  color: var(--clr-black);
  border-top: 1px solid currentColor;
  margin-top: calc(1.5 * var(--m-column));
}

.breakable {
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

.nowrap {
  white-space: nowrap;
}

.base__grid {
  display: grid;
  gap: 0 0;
  grid-template-columns: repeat(var(--n-columns), minmax(0, 1fr));
  max-width: 100%;
}

.base__grid-header {
  padding-top: calc(var(--m-column) / 2);
  align-items: center;
}


#skip-to-content-link {
  position: absolute;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;

  font-size: 1.6rem;
  line-height: 1;
  background: var(--clr-black);
  color: var(--clr-white);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 2px;
  left: 50%;
  top: 1em;
  transform: translateX(-50%);

  &:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
  }
}

header {
  top: 0;
  left: 0;
  right: 0;

  & ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  & a {
    color: var(--clr-fg);
    text-decoration: none;

    &.open {
      text-decoration-color: var(--clr-grey-500);
      text-decoration-line: underline;
      text-decoration-thickness: 2px;
      text-underline-offset: 0.2em;
    }
  }
}

.header__logo {
  grid-column: 2 / span 1;

  & svg {
    display: block;
    fill: var(--clr-logo);
  }
}


.header__menu-sub {
  display: none;
  
}

.open+.header__menu-sub {
  display: block;
}

.cta__links {
  display: none;
}


.cta__links {
  font-size: 1.6rem;

  
  & li+li {
    margin-top: 0.8em;
  }

}

a[data-icon], .cta-link {
  background-color: var(--clr-light-blue);
  padding: 0.8em 1.2em;
  text-decoration: none;  
  border-radius: 3em;
  font-family: var(--ff-alt)
}

.cta-link {
  font-weight: 400;
  font-variation-settings: 'wght' 600;
}


.subscribe-link-container {
  display: flex;
  justify-content: center;
}

.article__section-tile:has(.subscribe-link-container) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em 0;

  & .subscribe-link-container {
    order: -1;
  }
}

.header__menu-langhours {
  font-size: 1.6rem;

  & ul {
    display: flex;
    justify-content: start;
  }

  & li>a {
    text-decoration: none;
    color: var(--clr-fg);
    text-transform: capitalize;
  }

  & li+li::before {
    content: '/';
    margin: 0 0.2em;
    color: var(--clr-fg);
  }
}



.burger-menu-button {
  grid-column: span 1 / -2;
  border: none;
  cursor: pointer;
  justify-self: end;
  width: 48px;
  height: 48px;
  background-color: transparent;
  position: relative;


  &.is-open {
    position: relative;

    .burger-inner::before {
      top: 0;
      rotate: 45deg;
      transition:
        top 0.15s ease 0s,
        rotate 0.15s ease-out 0.3s,
        background-color 1s ease 0s;
    }

    & .burger-inner::after {
      top: 0;
      rotate: -45deg;
      transition:
        top 0.15s ease 0s,
        rotate 0.15s ease-out 0.3s,
        background-color 1s ease 0s;
    }

    & .burger-inner::before,
    .burger-inner::after {
      background-color: var(--clr-fg);
    }

    & .burger-inner {
      background-color: transparent;
      transition: background-color 0.3s ease 0.15s;
    }
  }
}

.burger-inner {
  left: 12px;
  top: 23px;
  width: 24px;
  height: 2px;
  background-color: var(--clr-fg, #000);
  border-radius: 4px;
  position: absolute;

  &::before,
  &::after {
    content: "";
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--clr-fg, #000);
    border-radius: 4px;
    position: absolute;
    transition:
      rotate 0.15s ease-out 0s,
      top 0.15s ease 0.3s;
  }

  &::before {
    top: -8px;
  }

  &::after {
    top: 8px;
  }
}

.header__menu {
  display: none;  
  font-size: 1.8rem;
  font-weight: 400;
  font-variation-settings: 'wght' 500;
}


.footer__inner {
  margin: var(--m-column) 0;
  font-size: 1.8rem;
  line-height: 1.5;
  font-family: var(--ff-alt);

  & h4 {
    font-weight: 400;
    font-variation-settings: 'wght' 600;    
    font-size: 1.8rem;
    margin: 0;

    &.open button::after {
      rotate: 45deg;
    }
  }

  & button {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0;
    appearance: none;
    font-family: var(--ff-alt);
    background-color: transparent;
    border: 0;
    font-weight: 400;
    font-variation-settings: 'wght' 600;
    font-size: 1.8rem;
    color: currentColor;

    &::after {
      background: url("/assets/ico-plus-02099091.svg") no-repeat 100% 50% scroll;
      content: ' ';
      width: 21px;
      height: 21px;
      display: block;
      transition: rotate 0.3s ease-in-out 0.1s;
    }
  }

  & a {
    color: var(--clr-white-300);

    &:hover {
      color: var(--clr-white-200);
    }
  }

  & li+li {
    margin-top: 0.2em;
  }

  & p {
    margin: 1em 0;
  }

  & .foldable > :last-child {
    margin-bottom: 0;    
  }
  
  & ul,
  .foldable>div {
    list-style: none;
    margin: 1.8rem 0 0 0;
    padding: 0;
  }
}

.some {
  margin: 0 0 var(--m-column) 0;
  display: flex;
  justify-content: center;
  align-items: center;

  & ul {
    display: flex;
    justify-content: space-between;
    padding: 0;
    list-style: none;
    gap: 1.4em;
    margin: 0;
  }

  
  & a {
    background-color: var(--clr-black);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
  }

  & svg {
    fill: var(--clr-bg);  
    width: 80%;  
  }

}


.youtube-container {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: flex;  
  background-size: cover;    
  background-repeat: no-repeat;
  background-position: center center;
  align-items: center;
  justify-content: center;
  & svg {
    width: 69px;
  } 
}

.video-container {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  position: relative;
  
  iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

.pop-up {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--clr-grey-800);
  color: var(--clr-white-200);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: var(--m-column);
  font-size: 1.6rem;
  line-height: 1.4;
  gap: var(--m-column);
  z-index: 100;
  
  & a {
    color: var(--clr-white-200);
  }

  & .btns {
    display: flex;
    gap: 1em;
    
  }
  
  & button {
    background-color: var(--clr-white-200);
    color: var(--clr-grey-800);  
    text-decoration: none;  
    border-radius: 2px;    
    padding: 0.6em 1em 0.5em 1em;  
    font-size: 1.6rem;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    transition: color .1s ease-in-out, background-color .1s ease-in-out;
    
    &:hover {
      
      color: var(--clr-black);
      background-color: var(--clr-white);
    }
  }
}


/* Small only */
@media (max-width: 1023px) {

  .header__menu-main {
    &>li+li {
      margin-top: 0.4em;
    }
  }

  .header__menu-sub {
    font-size: 2rem;
    margin: 1em 0 1.4em 0.6em;

    &>li+li {
      margin-top: 0.6em;
    }
  }

  .footer__inner {
    &>div {
      grid-column: 2 / -2;
      grid-row: auto;
    }

    & .foldable {
      display: none;
    }

    & h4.open~.foldable {
      display: block;
    }

    & h4 {
      margin-top: 1.5em;
    }

    &>div:first-of-type h4 {
      margin-top: 0;
    }
  }

  header:has(button.is-open) {

    background-color: var(--clr-menu);
    box-shadow: 0 2px 6px 0 rgba(0,0,0,.15);

    &.clr__negative {
      text-shadow: none;
      --clr-fg: var(--clr-black);

      & svg {
        filter: none;
        fill: var(--clr-logo);
      }
    }

    & .header__menu {
      padding: 32px 0;
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
      grid-column: 2 / -2;
    }

    & .cta__links {
      display: block;
      order: 3;
      margin-top: 1em;
      margin-left: -1.2em;
    }

    .header__menu-langhours {
      display: block;
    }

  }

  .header__menu-langhours ul {
    margin-bottom: 4px;
  }
}



/* L */
@media (min-width: 1024px) {
  :root {
    --n-columns: 23;
  }

  .pop-up {
    font-size: 1.8rem;
    flex-direction: row;  

    & button {
      font-size: 1.8rem;
    }
  }
  

  header:has(a.open) {

    &.clr__negative {
      text-shadow: none;
      --clr-fg: var(--clr-black);

      & svg {
        filter: none;
        fill: var(--clr-logo);
      }
    }

    & .cta__links {
      display: block;

      
    }

    &::before {
      content: '';
      position: absolute;
      background-color: var(--clr-menu);
      box-shadow: 0 2px 6px 0 rgba(0,0,0,.15);
      left: 0;
      top: 0;
      right: 0;
      padding-bottom: var(--m-column);
      height: var(--m-menu-height);
      z-index: -1;
    }

  }


  .header__menu {
    font-size: 2.0rem;
    grid-column: 7 / -2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2em;
  }

  .burger-menu-button {
    display: none;
  }

  .header__menu-sub {
    position: absolute;
    left: calc(var(--m-column) * 6);
    top: 150%;
    width: calc(var(--m-column) * 10);
    font-size: 2.4rem;
    display: none;

    & li+li {
      margin-top: 0.6em;
    }
  }

  .header__menu-main {
    display: flex;
    justify-content: flex-start;
    gap: 2em;

    & a {
      white-space: nowrap;
    }
  }

  .cta__links {
    position: absolute;
    left: calc(var(--m-column) * 1);
    top: 150%;
    font-size: 1.6rem;
    padding-top: 8px;
  }

  .opening__hours {
    color: var(--clr-fg);
    margin-top: 0.2em;
    font-size: 0.8em;    
  }

  .header__menu-langhours {
    text-align: right;
    font-size: inherit;

    & ul {
      justify-content: end;
    }
  }

  .footer__inner {

    &>div:nth-child(1) {
      grid-column: 2 / span 5;
    }

    &>div:nth-child(2) {
      grid-column: 8 / span 5;
    }

    &>div:nth-child(3) {
      grid-column: 14 / span 5;
    }

    &>div:nth-child(4) {
      grid-column: 20 / span 3;
    }

    .foldable+h4 {
      margin-top: 1.6em;
    }
  }


}

/*  XL */
@media (min-width: 1300px) {

  .header__menu {
    grid-column: 7 / -2;
  }

  .header__menu-sub {
    left: calc(var(--m-column) * 6);
  }

}



.article__section {
  grid-column: 2 / -2;
  padding: 0;

  font-size: var(--fs-m);
  line-height: 1.5;

  color: var(--clr-section, var(--clr-black));
    
  &:first-of-type {
    margin-top: calc(2.6 * var(--m-column));    
  }

  &.article__section-tile:has(.carousel) {
    grid-column: 1 / -1;
  }

  &.article__section-tile:has(.current-occasions-container) {
    grid-column: 2 / -2;
  }

  &.article__section-hero {
    margin-top: 0;
    grid-column: 1 / -1;
    position: relative;
    
    & img, video {
      height: 70vh;
      height: 70svh;
      width: 100%;
      object-fit: cover;
    }

    
    & figcaption, 
    & .caption {
      position: absolute;
      inset: var(--m-column);
      margin: 0;
      display: flex;
      flex-direction: column;      
      align-items: center;
      justify-content: center;   
      text-align: center;
      gap: 0.5em;

      & > * {
        margin: 0;
      }
    }

    & .video-ctrl {
      position: absolute;
      right: var(--m-column);
      bottom: var(--m-column);  
      width: 40px;
      height: 40px;
      border: none;
      background-color: rgba(255,255,255,0.2);
      border-radius: 4px;
      padding: 0;
      display: flex;
      align-items: center; 
      justify-content: center;
      cursor: pointer;
      z-index: 1;
      
      &:focus {
        background-color: rgba(255,255,255,0.6);
      }
    
      & svg {
        width: 24px;
        height: 24px;
      }        

      & svg:nth-of-type(1) {
        display: none;
      }
    }

    & video.paused + .video-ctrl {
      & svg:nth-of-type(2) {
        display: none;
      }
      & svg:nth-of-type(1) {
        display: flex;
      }  
    }  
  }

  &.align-se, &.align-s, &.align-sw {
    & figcaption, 
    & .caption {
      justify-content: end;      
    }      
  }

  &.align-nw, &.align-n, &.align-ne {
    & figcaption, 
    & .caption {
      justify-content: start;   
    }          
  }

  &.align-se, &.align-e, &.align-ne {
    & figcaption, 
    & .caption {
      align-items: end;
      text-align: right;
    }
  }

  &.align-e, &.align-w {
    & figcaption, 
    & .caption {
      justify-content: center;   
    }
  }

  &.align-sw, &.align-w, &.align-nw {
    & figcaption, 
    & .caption {
      align-items: start;
      text-align: left;
    }
  }  

  
  &.with-bg {
    background-color: var(--clr-sectionbg, transparent);
    grid-column: 1 / -1;
    padding: calc(var(--m-column) / 2) var(--m-column);
    border-radius: 5px;
  }

  & h1 {
    font-size: var(--fs-xxl);
    font-weight: 400;
    font-variation-settings: 'wght' 500;
    margin: 0 0 var(--m-m) 0;
    line-height: 1.2;
  }

  & h2 {
    font-size: var(--fs-xl);
    font-weight: 400;
    font-variation-settings: 'wght' 400;
    margin: var(--m-m) 0;
    line-height: 1.2;
  }

  & h3 {
    font-size: var(--fs-l);
    font-weight: 400;
    font-variation-settings: 'wght' 600;
    font-family: var(--ff-alt);
    margin: var(--m-l) 0;
    line-height: 1.2;
  }

  & p {
    margin: var(--m-m) 0;
  }

  & figure {
    margin: 0;
  }

  ul, ol {
    margin: var(--m-m) 0;
    padding-left: 1.5em;
    
  }

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

  & figcaption {    
    margin: var(--m-m) 0 0 0;
    font-size: 0.8em;
    line-height: 1.2;
    & p {
      margin: 0;
    }
  }

}

.article__section + .article__section {
  margin-top: calc(var(--m-column) / 2);
}

.occasions, 
.taglist-nodes {
  grid-column: 2 / -2; 
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 var(--m-column);  
}

.occasion-month {
  font-size: var(--fs-xl);
  line-height: 1.2;
  font-weight: 400;
  font-variation-settings: 'wght' 500;
  text-transform: capitalize;
  margin: 0;  
}

.occasion-month-container + .occasions {
  margin-top: calc(var(--m-column) * 0.5);
}

.occasion-month-container {
  grid-column: 2 / -2; 
}

*:has(> .unit-link) {
  position: relative;
  & > * {
    pointer-events: none;
  }  
  
  & a:not(.unit-link) {
    pointer-events: all;
    position: relative;
    z-index: 4; 
  }
}

.unit-link {
  position: absolute;
  inset: 0;
  pointer-events: all;    
  z-index: 3;
}


.occasion,
.taglist-node {  
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: 0;
  
  margin-bottom: var(--m-column);
  
  & figure {
    margin: 0;
    background-color: var(--clr-occasion); 
    border-radius: 0.8rem;   
  }

  & img {
    display: block;
    aspect-ratio: 0.67741935;
    object-fit: cover;
    width: 100%;
    border-radius: 0.8rem;
    margin: 0;
  }

}

.article__section .occasion-date,
.occasion-date {
  font-size: var(--fs-s);
  line-height: 1.2;
  font-weight: 400;
  font-variation-settings: 'wght' 400;
  font-family: var(--ff-alt);
  margin: 0.4em 0 0 0;
}

.article__section .occasion-title,
.article__section .taglist-title,
.occasion-title, 
.taglist-title {
  font-size: var(--fs-m);
  line-height: 1.2;
  font-weight: 400;
  font-variation-settings: 'wght' 600;
  margin: 0.5em 0 0 0;
  display: -webkit-box;
  -webkit-box-orient: vertical; 
  -webkit-line-clamp: 3;  
  line-clamp: 3;
  overflow: hidden;  
}

.article__section .taglist-tags,
.taglist-tags {
  font-size: var(--fs-xs);
  line-height: 1.2;
  font-weight: 400;
  font-variation-settings: 'wght' 700;
  font-family: var(--ff-alt);
  margin: 0.8em 0 0.2em 0;
}



main:has(.occasions-container),
main:has(.taglist-container),
main:has(.exhibitions-container) {
  .article__section {
    grid-column: 2 / -2;
  }
}


/* Medium */
@media (min-width: 800px) {
  .article__section {
    grid-column: 3 / -3;  
    
    &.article__section-hero {
      & figcaption {
        inset: var(--m-column) calc(2 * var(--m-column));
      }
    }

    &.with-bg {
      grid-column: 2 / -2;      
    }
  }


  .article__section:has(figure) {
    grid-column: 2 / -2;    
    
    & figcaption {
      margin-left: var(--m-column);
      margin-right: var(--m-column);
    }
  }
}

@media (min-width: 1024px) {
  .article__section {
    grid-column: 7 / -7;  
    
    &.article__section-hero {
      & figcaption {
        inset: var(--m-column) calc(6 * var(--m-column));
      }
    }

    &.with-bg {
      grid-column: 6 / -6;      
    }
  }

  .article__section:has(figure) {
    grid-column: 5 / -5;    

    & figcaption {
      margin-left: calc(2 * var(--m-column));
      margin-right: calc(2 * var(--m-column));
    }
  }

  .occasion-month-container {    
    grid-column: 3 / span 4;     
  }

  .occasion-month-container + .occasions {
    margin-top: 0;
  }


  .occasions {    
    grid-column: 8 / -3; 
    grid-template-columns: repeat(3, 1fr);  
  }

  .current-occasions-container .occasions {
    grid-template-columns: repeat(4, 1fr);  
  }

  
  .taglist-nodes {
    grid-template-columns: repeat(4, 1fr);  
  }

  main:has(.occasions-container) {
    .article__section {
      grid-column: 3 / -3;
    }
  }

}


.article__section .carousel,
.carousel {
  width: 100%;
  overflow-x: auto;
  display: flex;
  gap: 0 calc(var(--m-column) / 2);
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--m-column);
  scroll-padding-right: var(--m-column);
  list-style: none;
  margin: 0;  
  padding: 0 var(--m-column);
  box-sizing: border-box;

  &::-webkit-scrollbar {
    display: none;
  }

  & > li {
    scroll-snap-align: start;    
  }
  
  & img {
    height: 272px;    
    display: block;
    width: auto;    
  }

  
}

.carousel-controls {
  margin: 1em var(--m-column) 0 var(--m-column);
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 0.4em;
  

  & button {
    cursor: pointer;
    width: 3em;
    height: 3em;
    background-color: var(--clr-light-blue);
    border-radius: 100%;
    border: none;
    appearance: none;
    transition: opacity 0.2s ease-out 0s;
    display: flex;
    align-items: center;
    justify-content: center;

    & svg {
      width: 60%;
    }

    &[disabled], 
    &.inactive {
      opacity: 0.3;
      cursor: not-allowed;
    }
  }

}





.article__section-tile:has(.tile-carousel) {
  .tile-content {
    margin: 0 var(--m-column);
  }
}

@media (min-width: 800px) {
  .article__section .carousel,
  .carousel {

    & img {
      height: 475px;      
    }
  
  }
}


.exhibitions-container {
  grid-column: 2 / -2;

  &:has(.exhibitions-current) {
    grid-column: 1 / -1;
  }

  & + * {
    margin-top: var(--m-column);
  }
  
  
  & ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

}

.exhibition-group {
  font-size: var(--fs-xl);    
  line-height: 1.2;   
  margin: 0 0 var(--m-m) 0;
  font-family: var(--ff-alt);
  font-weight: 400;  
}

.exhibitions-current {
  
  & li {
    width: 100%;
    overflow: hidden;
    display: grid;
    
    grid-template-rows: 320px;
    grid-template-areas: "hero";

    & > * {
      grid-area: hero;      
    }

    & img {
      object-fit: cover; 
      place-self: stretch stretch;
      border-radius: 8px;
    }

    & > div {
      width: calc(var(--m-column) * 10);
      place-self: center start;
      margin-left: var(--m-column);
    }

    & + li {
      margin-top: var(--m-column);
    }
  }

  & .exhibition-title {
    color: var(--clr-white);
    font-size: var(--fs-xxl); 
    line-height: 1.2;   
    margin: 0 0 var(--m-s) 0;
    font-weight: 400;
    font-variation-settings: 'wght' 500;
  }

  & .exhibition-date {
    color: var(--clr-white);
    font-size: var(--fs-m);    
    line-height: 1.2;   
    margin: 0;
    font-family: var(--ff-alt);
    font-weight: 400;
    font-variation-settings: 'wght' 400;
  }

}

.exhibitions-future {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--m-column);

  & img {
    aspect-ratio: 1.4;
    width: 100%;
    display: block;
    object-fit: cover; 
    border-radius: 8px;
    margin: 0 0 var(--m-xl) 0;
  }

  & .exhibition-title {
    font-size: var(--fs-xl); 
    line-height: 1.2;   
    margin: 0 0 var(--m-s) 0;
    font-weight: 400;
    font-variation-settings: 'wght' 500;
  }

  & .exhibition-date {
    font-size: var(--fs-m);    
    line-height: 1.2;   
    margin: 0;
    font-family: var(--ff-alt);
    font-weight: 400;
    font-variation-settings: 'wght' 400;
  }

} 

.exhibitions-past  {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--m-column);

  & img {
    aspect-ratio: 0.6;
    width: 100%;
    display: block;
    object-fit: cover; 
    border-radius: 8px;
    margin: 0 0 var(--m-xl) 0;
  }

  & .exhibition-title {
    font-size: var(--fs-m); 
    line-height: 1.2;   
    margin: 0 0 var(--m-s) 0;
    font-weight: 400;
    font-variation-settings: 'wght' 600;
  }

  & .exhibition-date {
    font-size: var(--fs-s);    
    line-height: 1.2;   
    margin: 0;
    font-family: var(--ff-alt);
    font-weight: 400;
    font-variation-settings: 'wght' 400;
  }

} 


@media (min-width: 800px) {

  .exhibitions-past  {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
  .exhibitions-future {
    grid-template-columns: 1fr 1fr;
  }

  .exhibitions-current {
    & li {
      grid-template-rows: 480px;

      & > div {
        place-self: center center;
        margin-left: inherit;
      }
    }
  }
}

@media (min-width: 1024px) {

  main:has(.exhibitions-container) {
    .article__section {
      grid-column: 3 / -3;
    }    
  }
  .exhibitions-container {
    grid-column: 3 / -3;

    &:has(.exhibitions-current) {
      grid-column: 3 / -3;
    }
  }
  
}

#collection-count {
  grid-column: 2 / -2;
  font-size: var(--fs-m);
  font-family: var(--ff-alt);
  margin: calc(var(--m-column) / 2) 0;
  place-self: center end;
}

.collection-search-form {
  margin: calc(var(--m-column) / 2) 0;
  grid-column: 2 / -2;
  place-self: center;

  display: flex;
  align-items: center;
  justify-content: center;   
          
  flex-wrap: wrap;
  gap: 1em;

  font-size: var(--fs-m);
  font-family: var(--ff-alt);

  input, select, button {
    font-size: var(--fs-m);
    font-family: var(--ff-alt);    
  }

  & input[type=text] {
    background-color: transparent;
    border: none;
    outline: none;
    width: 100%;
    line-height: 1;
    padding: 0;
    flex-grow: 1;
    flex: 1 1 auto;
  }

  & .search-field {
    border: 1px solid var(--clr-fg);
    border-radius: 4px;
    padding: 12px;
    height: 48px;
    box-sizing: border-box;
    display: flex;
    gap: 0.4em;
    align-items: center;
    justify-content: start;
    background-color: var(--clr-white);    
    flex-shrink: 1;
    width: 100%;
    max-width: 320px;    
  }

  & .icon-cb {
    display: grid;
    grid-template-areas: "cm label";
    grid-template-columns: 1.6em 1fr;
    grid-template-rows: 1.6em;
    gap: 0.4em;
    cursor: pointer;
    

    & svg {
      display: none;
    }

    & .cm {
      grid-area: cm;
      border: 1px solid var(--clr-fg);
      border-radius: 4px;
      place-self: stretch stretch;
      background-color: var(--clr-white);
    }

    & .label {
      grid-area: label;
      place-self: center start;
      user-select: none;
    }

    & svg {
      grid-area: cm;
      place-self: center center;
    }

    & input {
      position: absolute;
      opacity: 0;
      cursor: pointer;
      height: 0;
      width: 0;
      
      &:checked ~ svg {
        display: block;
      }
    }
  }

  & a.search-form-reset {
    text-decoration: none;  
    font-weight: 700;      
    flex-shrink: 0;
    flex-grow: 0;
    width: 22px;
    line-height: 1;
    
  }

  & button {
    appearance: none;
    background-color: transparent;
    border: none;
    outline: none;
    display: inline-flex;   
    align-items: center;
    padding: 0; 
    flex-shrink: 0;
    flex-grow: 0;
    cursor: pointer;
    width: 22px;
    height: 22px;

    & svg {
      width: 1.6ch;
      fill: var(--clr-fg);
      height: auto;
    }  
  }

  &:has(input:placeholder-shown) {
    & .search-form-reset {
      display: none;
    }
  }

  & select {
    appearance: none;
    outline: none;
    border: 1px solid var(--clr-fg);
    border-radius: 4px;
    padding: 12px 32px 12px 12px;
    height: 48px;
    box-sizing: border-box;
    background: white url("/assets/ico-arrow-down-dc01f77c.svg") no-repeat right 50% scroll;    
    background-position: top 50% right 10px;
    background-size: 1.2em 1.2em;
  }

}




.artworks {
  margin: 0 0 var(--m-column) 0;
  grid-column: 2 / -2;
  display: grid;
  
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--m-column) calc(var(--m-column) / 2);

}

.artwork {

  text-align: center;

  & img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;    
  }

  & figure {
    display: block;
    width: 100%;
    aspect-ratio: 1; 
    margin: 0 0 var(--m-xl) 0;
  }

  & .artwork-creator {
    font-size: var(--fs-s);    
    line-height: 1.2;   
    margin: 0 0 var(--m-s) 0;
    font-family: var(--ff-alt);
    font-weight: 400;    
  }
  & .artwork-title {
    font-size: var(--fs-s); 
    line-height: 1.2;   
    font-style: italic;
    margin: 0;
    font-family: var(--ff-alt);
    font-weight: 400;   
  }
}

.artwork-title {
  
  & .years {
    font-variation-settings: 'wght' 400;
    &::before {
      content: ', ';
    
    }
  }

}

.article__section-artwork {
  ul {
    list-style: none;
    padding-left: 0;
  }

  & img {
    max-height: 70svh;
    object-fit: contain;
  }

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



.field {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  
  &>div:nth-child(1) {
    & label {
      font-size: 1.6rem;
      line-height: 1.2;
      color: var(--clr-grey-600);
    }
  }

  & label {
    font-family: var(--ff-alt);
  }

  
  & .field_with_errors {
    --border: var(--clr-error);
  }

  & + .field, 
  & + .input__fields-two {
    margin-top: 1.2em;
  }

  
  &:has(input[type=submit]) {
    margin: 2em 0;
    display: block;
  }
}

input[type=submit] {
  font-family: var(--ff-alt);
  font-size: 1.6rem;
  background-color: var(--clr-grey-800);
  color: var(--clr-white);
  padding: 1em 1.2em;
  border: none;
  appearance: none;
  border-radius: 2px;
  cursor: pointer;
}

.material__input {
  display: flex;
  font-family: var(--ff-base);
  font-size: 1.6rem;
  border: none !important;
  background-color: transparent;
  width: 100%;
  height: 100%;
  appearance: none;
  padding: 0;
  box-shadow: none;

  &:focus {
    outline: none;
  }

}

textarea.material__input {
  resize: none;
}

.input-box {
  display: flex;
  height: 46px;
  width: 100%;
  box-sizing: border-box;
  align-items: center;
  padding: 0 16px;
  margin: 0;
  overflow: visible;
  -webkit-box-align: baseline;
  --outline: var(--clr-action);
  border-radius: 4px;
  border: 1px solid var(--clr-border);

  & .field_with_errors {
    display: flex;
    height: 100%;
    width: 100%;
  }

  &:has(textarea) {
    padding: 0 0 0 8px;
    height: auto;

    & textarea {
      line-height: 1.2;
      margin: 1px 0;
      padding: 8px 16px 8px 0;      
    } 
  }

  &:hover {
    border-color: var(--clr-grey-500);
  }

  &:focus-within {
    outline: 2px solid var(--outline);
    outline-offset: -2px;
  }

  &:has(.field_with_errors) {
    --outline: var(--clr-error);

    &:hover {
      border-color: var(--clr-error);
    }
  }
}

p[role="alert"] {
  margin: 4px 0 0 0;
  color: var(--clr-error);
  font-size: 1.2rem;
}

ul.errors {
  color: var(--clr-error);
  margin: 0 0 1.2em 0;
}

p[role="tooltip"] {
  margin: 4px 0 0 0;
  color: var(--clr-grey-500);
  font-size: 1.2rem;
}


ul.form__errors {
  color: var(--clr-error);
  padding: 0;
  list-style: none;
}



.input__fields-two {
  display: grid;
  gap: 2em;
  grid-template-columns: 1fr 2fr;

  & .field + .field {
    margin-top: 0;
  }
}

.input__fields-two + .field {
  margin-top: 1.2em;
}