/******************/
/* MAIN → SECTION */
/******************/

.section--content {
  grid-column: full;

  position: relative;
  display: grid;
  grid-template-columns:inherit;
}

.section--content:nth-of-type(1) {
  grid-row:2;
}

.section--content + .section--content {
  margin-top:calc(var(--gap) * 1.5);
}





/***********************************/
/* SECTION CONTENT → CONTENT BLOCK */
/***********************************/

.section--content__block {
  position: relative;
  grid-column:small;

  widows:3;
  orphans:3;
}





/*********************************/
/* SECTION CONTENT → TEXT + NOTE */
/*********************************/

.section--content__text--note {
  grid-column:large;

  display:grid;
  grid-template-columns: 
      min(100%, var(--small) + var(--gap))
      1fr;
}

.section--content__text--note p.note {
  grid-column:1/-1;
  justify-self:end;
  max-width:min(100%, 32rem);
}

@container main (width > 54em) {
  .section--content__text--note {
    gap:0 var(--gap);
  }
  
  .section--content__text--note p.note {
    grid-column:initial;
    align-self: end;
    margin:1rem 0;
  }
}





/****************************/
/* SECTION CONTENT → FIGURE */
/****************************/

.section--content__figure {
  margin:calc(var(--gap) * 1.5) 0;
}

.section--content__figure:first-of-type {
  margin-top: 0;
}

.section--content__figure:last-of-type {
  margin-bottom:0;
}

.section--content__figure figure {
  margin:0;
  display:grid;
  gap:var(--gap);
}

.section--content__figure div {
  overflow:auto;
  scrollbar-width: none;
  overscroll-behavior-x:contain;
}

.section--content__figure div::-webkit-scrollbar {
  display: none;
}

.section--content__figure img {
  place-self:center;
  width:100%;
}

.section--content__figure figcaption {
  max-width:max(50%, 20rem);
  justify-self:end;
  text-align:right;
}


@container main (width > 51em) {
  .section--content__figure {
    grid-column:large;
  }

  .section--content__figure figure {
    grid-template-columns: 
      calc(var(--small) + var(--gap))
      1fr;
  }

  .section--content__figure figcaption {
    align-self: center;
    text-align:left;
  }
}





/**********************************/
/* SECTION CONTENT → FIGURE LARGE */
/**********************************/

.section--content__figure--large {
  grid-column:large;
}

@container main (width > 51em) {
  .section--content__figure--large figure {
    grid-template-columns: 1fr;
  }

  .section--content__figure--large figcaption {
    text-align:right;
  }
}





/***************************/
/* SECTION CONTENT → TABLE */
/***************************/

.section--content__table {
  margin:calc(var(--gap) * 1) 0;
}

.section--content__table:first-of-type {
  margin-top: 0;
}

.section--content__table:last-of-type {
  margin-bottom:0;
}

.section--content__table figure {
  margin:0;
  display:grid;
  gap:var(--gap);
}

.section--content__table div {
  overflow:auto;
  scrollbar-width: none;
  overscroll-behavior-x:contain;
}

.section--content__table div::-webkit-scrollbar {
  display: none;
}

.section--content__table table {
  width:100%;  
}

.section--content__table figcaption {
  max-width:max(50%, 20rem);
  justify-self:end;
  text-align: right;
}


@container main (width > 51em) {
  .section--content__table {
    grid-column:large;
  }

  .section--content__table figure {
    grid-template-columns: 
      calc(var(--small) + var(--gap))
      1fr;
  }

  .section--content__table figcaption {
    align-self: end;
    text-align:left;
  }
}





/**********************************/
/* SECTION CONTENT → TABLE/FIGURE */
/**********************************/

/* form */
.section--content__table-figure form {
  position:sticky;
  left:0;
}

@container main (width > 36em) {
  .section--content__table-figure form {
    display:block;
  }
}

@media only print {
  .section--content__table-figure form {
    display:none;
  }
}

.section--content__table-figure form fieldset {
  margin:0;
  padding:0 0 1em 1em;
  border:none;

  display:flex;
  gap:.5em;
}

/* table */
.section--content__table-figure figure {
  margin:0;
}

@container main (width > 36em) {
  .section--content__table-figure:has([value="grafiek"]:checked) figure:nth-of-type(1) {
    display:none;
  }
}

/* image */
.section--content__table-figure figure:nth-of-type(2) {
  display:none;
}

@container main (width > 36em) {
  .section--content__table-figure:has([value="grafiek"]:checked) figure:nth-of-type(2) {
    display:grid;
  }
}





/*****************************/
/* SECTION CONTENT → STUDENT */
/*****************************/

.section--content__student {
  grid-column:large;
  margin:calc(var(--gap) * .5) 0;
}





/***************************/
/* SECTION CONTENT → VIDEO */
/***************************/

/* video on top of header */
.section--content--video:nth-of-type(1) {
  order:-1;
  grid-row:1;
}

@media (height > 48em) {
  .section--content--video:nth-of-type(1) {
    position: sticky;
    top:3.5em;
    z-index: 1;
  }
}

.section--content__video {
  grid-column: medium;
}


/* no margin-top for transcriptie */
.section--content--video + .section--content--transcriptie {
  margin-top:0;
}

.section--content__transcriptie {
  grid-column:inset/small;
}


/* other videos */
.section--content__videos {
  grid-column:medium;
}