/******************/
/* SECTION - WERK */
/******************/

#werk > ul {
  position: relative;
  z-index: 1;

  margin:clamp(.5em, 2.5vw, .75em) 0;
  padding:clamp(.5em, 2.5vw, .75em) 0;
  list-style:none;

  /* horizontal scroll */
  display:grid;
  grid-template-columns: repeat( auto-fit, minmax(15.5em, 1fr) );
  gap:clamp(1em, 4vw, 2em);
  justify-items:center;
}

#werk > ul::-webkit-scrollbar {
  display: none;
}

#werk > ul li {
  flex-shrink:0;
  scroll-snap-align:center;
  
  width:min(100%, 24em);
  padding:0;

  line-height:1.3em;
}

/* change up background-gradients */
#werk ul li:nth-of-type(1n)  {--i:1;  --angle:118deg; --pos:right bottom;  --angle-h3:-0.5deg; --angle-p: 1.0deg; }
#werk ul li:nth-of-type(2n)  {--i:2;  --angle:28deg;  --pos:right center;  --angle-h3: 0.4deg; --angle-p:-1.0deg; }
#werk ul li:nth-of-type(3n)  {--i:3;  --angle:138deg; --pos:right top;     --angle-h3:-0.6deg; --angle-p: 0.5deg; }
#werk ul li:nth-of-type(4n)  {--i:4;  --angle:48deg;  --pos:center top;    --angle-h3:-0.3deg; --angle-p: 0.7deg; }
#werk ul li:nth-of-type(5n)  {--i:5;  --angle:158deg; --pos:left top;      --angle-h3:-0.7deg; --angle-p: 1.0deg; }
#werk ul li:nth-of-type(6n)  {--i:6;  --angle:68deg;  --pos:left center;   --angle-h3: 0.3deg; --angle-p:-1.0deg; }
#werk ul li:nth-of-type(7n)  {--i:7;  --angle:178deg; --pos:left bottom;   --angle-h3: 0.6deg; --angle-p:-0.3deg; }
#werk ul li:nth-of-type(8n)  {--i:8;  --angle:88deg;  --pos:center bottom; --angle-h3:-0.7deg; --angle-p: 0.7deg; }
#werk ul li:nth-of-type(9n)  {--i:9;  --angle:198deg; --pos:right bottom;  --angle-h3: 0.3deg; --angle-p:-1.0deg; }
#werk ul li:nth-of-type(10n) {--i:10; --angle:108deg; --pos:right center;  --angle-h3: 0.6deg; --angle-p: 1.0deg; }
#werk ul li:nth-of-type(11n) {--i:11; --angle:218deg; --pos:right top;     --angle-h3: 0.4deg; --angle-p: 0.6deg; }
#werk ul li:nth-of-type(12n) {--i:12; --angle:128deg; --pos:center top;    --angle-h3: 0.5deg; --angle-p:-0.6deg; }

/* de content wrapper */
#werk > ul li > div {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1em;
  text-align:center;
}

/* de content speech bubble */
#werk > ul li > div div {
  position: relative;
  padding:.375em;
  border:solid 1px currentColor;
  background-color:var(--bg-body);

  background-color: var(--bg-first);
}

#werk > ul li > div div::after {
  content:"";
  position:absolute;
  width:.75em;
  aspect-ratio:1;
  background-color:inherit;
  bottom:calc(100% - .25px - .375em);
  left:calc(50% - .5em);
  border:inherit;
  transform:rotate(45deg) skew(15deg, 15deg) ;
  clip-path:polygon(0 0, 100% 0, 0 100%, 0 0);
}

/* de content */
#werk > ul li h3 {
  margin:0;
  font-size:1em;
}

#werk > ul li p {
  margin:.25em 0;
  line-height:1;
}

#werk > ul li a {
  position:relative;
  padding-left:.9em;
  white-space:nowrap;
}

#werk > ul li a::before {
  content:"⇾";
  position:absolute;
  left:0;
  color:var(--clr-body)
}

#werk > ul li picture {
  order:-100;

  padding:3em;

  border-radius:1.5em;
  background-image:var(--wdd-bg-img);

}

#werk > ul li img {
  display:block;
  width:100%;
  height:auto;
}





/* PRINT */

@media print {
  #werk > ul {
    /* grid */
    display:grid;
    grid-template-columns:repeat(auto-fit, 12em);
  }
  
  #werk > ul li {
    border:none;
  }

  #werk > ul li div {
    padding:.5em 0;
  }

  #werk > ul li a {
    white-space:normal;
    word-break: break-all;
  }

  #werk nav {
    display: none;
  }
}