/**********/
/* TWAALF */
/**********/

ul.ul--twaalf {
  display:flex;
  justify-content: center;
  flex-wrap:wrap;
  gap:var(--gap);
  max-width:40em;

  margin:0 auto;
  padding:0;
  list-style:none;
}

@supports (list-style-type:"") {
  ul.ul--twaalf {
    list-style:initial;
    list-style-type:"";
  }
} 

/* student */
ul.ul--twaalf li {
  flex-basis:clamp(10em, 30vw, 12em);
}

ul.ul--twaalf li a {
  display:grid;
  grid-template-rows: 1fr max-content max-content;
  color:var(--clr--student);
  text-decoration-line:none;
}

ul.ul--twaalf li a:hover {
  text-decoration-line:underline;
  text-decoration-color:currentColor;
}

/* tekst */
ul.ul--twaalf li a h3,
ul.ul--twaalf li a p {
  place-self:end start;
  z-index: 1;

  margin:0;
  padding:0 .25em;

  font-size:1em;
  background-color:var(--bg--student);
}

ul.ul--twaalf li a h3 {
  grid-area:3/1/4/2;
}

ul.ul--twaalf li a p {
  grid-area:2/1/3/2;
}

/* image */
ul.ul--twaalf li img {
  grid-area:1/1/3/2;
  justify-self: center;

  height:10em;
  width:auto;
  display:block;
}





/**************/
/* ACHTERWERK */
/**************/

ul.ul--achterwerk {
  margin:0;
  padding:0;
  list-style:none;

  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%,15em), 1fr));
  gap:var(--gap);
}

@supports (list-style-type:"") {
  ul.ul--achterwerk {
    list-style:initial;
    list-style-type:"";
  }
} 

/* video */
ul.ul--achterwerk li {
  display:grid;
  align-content:start;
  gap:.5em;
}

/* titel */
ul.ul--achterwerk li h3 {
  margin:0;
  font-size:1em;
  font-weight:400;
}

/* vimeo */
ul.ul--achterwerk li div {
  position:relative;
  width:100%;
  padding:56.25% 0 0 0;
  order:-1;
}

/* print */
@media only print {
  ul.ul--achterwerk li div {
    display:none;
  }
}