*, *::after, *::before {
  box-sizing:border-box;  
}

a,
p,
h2,
h3,
li {
    font-family: var(--body-font), sans-serif;
}

main section:first-of-type ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5em;
}

main section:first-of-type video {
    display: block;
}

/* https://codepen.io/Ya-l-Markus/pen/ByjmJyM    */
/* first card */
main section:first-of-type ul > li:first-child {
    display: grid;
    grid-template-columns: 10% 1fr 10%;
    grid-template-rows: 1fr max-content max-content max-content 1em;
    row-gap: 2%;
} 

main section:first-of-type ul li:first-child h2 {
    grid-column: 2;
    grid-row: 3;
    color: var(--color-always-white);
    justify-self: center;
    font-family: var(--nike-font), sans-serif;
    font-size: 300%;
}

main section:first-of-type ul li:first-child p {
    grid-column: 2;
    grid-row: 2;
    color: var(--color-always-white);
    justify-self: center;
    margin-bottom: -2%;
}

main section:first-of-type ul li:first-child a {
    display: flex;
    align-items: center;
    flex-direction: row;
    align-items: center;
    grid-column: 2;
    grid-row: 4;
    border-radius: 3em;
    background-color: var(--color-background);
    text-align: center;
    width: max-content;
    height: max-content;
    padding: .5rem 1rem;
    justify-self: center;   
    
}

main section:first-of-type ul li:first-child a:hover {
    background-color: var(--color-background-inverted) ;
    color: var(--color-inverted);
}

/* utopia fyi */
main section:first-of-type ul li:first-child > video {
    width: 100%;
    /* max-height: 32em;
    min-height: 27em; */
    height: clamp(26.875rem, 16.0577rem + 46.1538vw, 43.75rem);
    object-fit: cover;
    object-position: 50% 10%;
    z-index: -1;
    grid-row: 1/-1;
    grid-column: 1/-1;
}

main section:first-of-type ul li:first-child > button {
	grid-row:5;
    grid-column: 3;
	align-self:end;
	justify-self:end;
	margin:1em;
	z-index:1;
    background: none;
    width: 3em;
    height: auto;
    border: none;
}

main section:first-of-type ul li:first-child > button:hover {
    background-color: var(--color-button-hover);
    border-radius: 20%;
}
 
main section:first-of-type ul li:first-child > button img {
    width: 3em;
    height: auto;
    border: none;
}




/* Overige cards */
main section:first-of-type ul li:not(:first-child) {
    display: grid;
    grid-template-columns: 5% 1fr 5%;
    grid-template-rows: 1fr max-content max-content 1% max-content 1em;
    overflow: hidden;
    height: auto;
}


main section:first-of-type ul li:not(:first-child) h2 {
    grid-column: 2;
    grid-row: 2;
    color: var(--color-always-white);
    font-size: 100%;
}

main section:first-of-type ul li:not(:first-child) h3 {
    grid-column: 2;
    grid-row: 3;
    color: var(--color-always-white);
    margin-bottom: 5%;
    font-size: 150%;
}


main section:first-of-type ul li:not(:first-child) a {
    grid-column: 2;
    grid-row: 5;
    border-radius: 3em;
    background-color: var(--color-background);
    width: max-content;
    padding: .5rem 1rem;
}

main section:first-of-type ul li:not(:first-child) a:hover  {
    background-color: var(--color-background-inverted) ;
    color: var(--color-inverted);
}

main section:first-of-type ul li:not(:first-child) img {
    grid-column: 1/-1;
    grid-row: 1/-1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

/* utopia fyi */
main section:first-of-type ul li:nth-of-type(6) img {
    width: 100%;
    height: clamp(26.875rem, 16.0577rem + 46.1538vw, 43.75rem);
    object-fit: cover;
    object-position: 50% 65%;
    z-index: -1;
}

@media (min-width: 37.5em) {
    main section:first-of-type ul {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 2% 1fr 1fr 2%;
    grid-template-rows: max-content max-content max-content max-content;
    gap: 2%;
}



main section:first-of-type ul li:first-child {
    grid-column: 1/-1;
    grid-row: 1;
    gap: 7%;
    margin-left: 2%;
    margin-right: 2%;
}

main section:first-of-type ul li:nth-of-type(n+2):not(:last-of-type) img {
    aspect-ratio: 1/1;
    height: unset;
}

main section:first-of-type ul li:nth-of-type(2) {
    grid-column: 2 ;
    grid-row: 2;
}

main section:first-of-type ul li:nth-of-type(3) {
    grid-column: 3 ;
    grid-row: 2;
    
}

main section:first-of-type ul li:nth-of-type(4) {
    grid-column: 2 ;
    grid-row: 3;
}

main section:first-of-type ul li:nth-of-type(5) {
    grid-column: 3 ;
    grid-row: 3;
}

main section:first-of-type ul li:nth-of-type(6) {
    grid-column: 1/-1 ;
    grid-row: 4;
    margin-left: 2%;
    margin-right: 2%;
}


}

/* main section:first-of-type ul li:first-child a:nth-of-type(2) {
    border-radius: 3em;
    background-color: rgb(255, 255, 255);
    text-align: center;
    align-content: center;
    color: #000;
    margin-bottom: 2em;
    margin-left: 11em;
    padding-inline: 1em;
    padding-block: .5em;
    width: max-content;

} */

main section:nth-of-type(2) h2 {
    margin-top: 3rem;
    margin-left: 3rem;
}

main section:nth-of-type(2) ul {
    display:flex;
    overflow: auto;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    overscroll-behavior-x:contain;
    gap:1em;
    list-style: none;
    margin-left: 1.5rem;
    margin-right: 1.5rem;
    scrollbar-width: none;

    anchor-name:--carousel;
}

main section:nth-of-type(2) ul li {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-basis:100%;
    flex-shrink:0;
    scroll-snap-align:center;
    max-width: 20rem;
}

main section:nth-of-type(2) ul li a {
    color: var(--color-inverted);
    background-color: var(--color-background-inverted);
    border-radius: 3em;
    padding-inline: 1em;
    padding-block: .5em;
    width: max-content;
    margin-bottom: 2rem;  
    margin-top: 1em;  
    order: 2;
}

main section:nth-of-type(2) ul li a:hover {
    color: var(--color-text);
    background-color: var(--color-background);
    border: solid 2px var(--color-text);
}

main section:nth-of-type(2) ul li img {
    display: inline; 
    width: 100%;
    height: auto;
    object-fit: cover;
    z-index: -1;
}

@media(min-width: 37.5em) {
    main section:nth-of-type(2) {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 2em;
    margin-top: 15%;
    margin-left: 5%;
}



main section:nth-of-type(2) ul {
    margin: 0;
    padding: 0;
    gap: 9em;
}

main section:nth-of-type(2) ul li img {
    width: 160%;
    height: 70%;
    object-fit: contain;
}

main section:nth-of-type(2) ul::scroll-button(*) {
  width:3em;
  aspect-ratio:1;
  margin:1em 0 0;
  padding:0;
  background-color:red;
  border:none;
  border-radius:50%;
  cursor:pointer;
  font-size:1em;
  /* position:relative; */
  position:absolute;
  position-anchor:--carousel;
}

main section:nth-of-type(2) ul::scroll-button(right) {
  content: '→' / 'Next';
  /* right:clamp(1.5rem, 5vw, 2rem); */
  position-area:block-start;
  justify-self:end;
}

main section:nth-of-type(2) ul::scroll-button(left) {
  content: '←' / 'Previous';
  /* left:clamp(1.5rem, 5vw, 2rem); */
  position-area:block-start;
  justify-self:end;

  translate:-125%;
}
  
main section:nth-of-type(2) ul::scroll-button(*):disabled {
  opacity:.5;
}

}

main section:last-of-type {
    display: flex;
    flex-direction: column;
}

main section:last-of-type ul {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-left: 1.5rem;
    margin-bottom: 6rem;
    list-style: none;
}   

main section:last-of-type ul li details summary h2 {
    font-size: 130%;
}

main section:last-of-type ul li details summary::marker {
    content: "";

}

main section:last-of-type ul li details ul {
    display: flex;
    flex-direction: column;
    margin-top: 1.5rem;
    margin-bottom: 5rem;
}

main section:last-of-type ul li details ul li a {
    font-size: 100%;
    font-family: var(--bold-font);
    opacity: .6;
    
}

main section:last-of-type ul li details ul li a:hover{
    color: var(--color-text);
    opacity: 1;
    text-decoration: underline;
}


@media(min-width: 37.5em) {

    main section:last-of-type ul {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        gap: 1em;

    }

    main section:last-of-type ul li details summary {
        margin-bottom: 2em;
    }

    main section:last-of-type ul li details ul {
        margin: 0;
        
    }
    
}