/*******/
/* EEN */
/*******/

main header p {
  grid-template-columns:max-content 1em 1fr;
  grid-template-rows:1fr max-content;
  gap:0;
  align-items:end;
  justify-items:start;
}

/* image */
main header p img {
  grid-area:1/1/3/3;
  height:8em;
  width:auto;
}

/* text */
main header p span {
  z-index:1;
  color:var(--clr--student);
  background-color:var(--bg--student);
  padding:0 .25em;
}

/* name */
main header p span:nth-of-type(1) {
  grid-area:1/2/2/4;
  font-weight:700;
}

/* year */
main header p span:nth-of-type(2) {
  grid-area:2/2/3/4;
}





/*********/
/* Q & A */
/*********/

h3 {
  text-wrap:pretty;
}

h3 ~ p {
  padding-left:var(--gap);
}

p:has(+ h3) {
  padding-bottom:var(--gap);
}





/************/
/* NOG VIER */
/************/

ul.ul--twaalf {
  display:flex;
  justify-content: center;
  flex-wrap:wrap;
  gap:1em;

  margin:var(--gap) 0;
  padding:0;
  list-style:none;
}

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

/* student */
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;
}

/* text */
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);
}

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

/* year */
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:6em;
  width:auto;
  display:block;
}

/* print */
@media only print {
  #nogvier {
    display:none;
  }
}