img{
    width: 10em;
    height: auto;
}


main section:nth-of-type(2) {
	display: grid;
	grid-template-rows: 1fr 1fr 1fr;
	text-align: center;
}

main section:nth-of-type(2) img{
	width: 31.3125em;
	height: 20em;
	width: 100%;
}

main section:nth-of-type(2) img:nth-of-type(1){
	grid-row: 1/2;
	grid-column: 1;
}

main section:nth-of-type(2) img:nth-of-type(2){
	grid-row: 2/3;
	grid-column: 1;
	z-index: -1;
}

main section:nth-of-type(2) img:nth-of-type(3){
	grid-row: 3/4;
	grid-column: 1;
}

main section:nth-of-type(2) h2{
	/* position: absolute; */
	display: flex;
	justify-content: center;
	/* align-self: end; */
	grid-row: 2/3;
	grid-column: 1;
	margin-top: 100px;
}

main section:nth-of-type(2) p{
	/* position: absolute; */
	display: flex;
	justify-content: center;
	grid-row: 2/3;
	grid-column: 1;
	margin-top: 150px;
}

main section:nth-of-type(2) button{
	/* position: absolute; */
	display: flex;
	justify-content: center;
	grid-row: 2/3;
	grid-column: 1;
	height: 1em;
	margin-top: 200px;
}


@media(min-width: 40em) {
    main section:nth-of-type(1){
        display: grid;
        grid-template-columns: 50% 50%;
        
    }
    
    main section:nth-of-type(1) p, main section:nth-of-type(1) h2 {
        grid-column: 1;
        grid-row: 1;
    }

    main section:nth-of-type(1) p:nth-of-type(1) {
        padding-top: 60px;
    }

    main section:nth-of-type(1) p:nth-of-type(2) {
        padding-top: 120px;
    }

    main section:nth-of-type(1) img {
        padding-left: 40px;
        height: auto;
    }

    main section:nth-of-type(2){
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: auto;

	}

	main section:nth-of-type(2) img:nth-of-type(1){
		grid-row-start: 1;
		grid-column: 1;
	}
	
	main section:nth-of-type(2) img:nth-of-type(2){
		grid-row-start: 1;
		grid-column: 2;
		z-index: -1;
	}
	
	main section:nth-of-type(2) img:nth-of-type(3){
		grid-row-start: 1;
		grid-column: 3;
		z-index: -1;
	}

	main section:nth-of-type(2) h2{
		grid-row: 1;
		grid-column: 2;
	}

	main section:nth-of-type(2) p{
		grid-row: 1;
		grid-column: 2;
	}

	main section:nth-of-type(2) button{
		grid-row: 1;
		grid-column: 2;
	}

    main section:nth-of-type(3) {
        display: grid;
        grid-template-columns: 50% 50%;
    }

    main section:nth-of-type(3) h2 {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    main section:nth-of-type(3) p {
        grid-column: 2;
        grid-row: 1;
    }

    main section:nth-of-type(3) button {
        grid-column: 2;
        grid-row: 1;
        width: 10em;
        height: 5em;
        margin-top: 14em;
    }

    main section:nth-of-type(4) {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }

    main section:nth-of-type(4) h2{
        grid-row: 1;
    }

    main section:nth-of-type(4) img{
        grid-row: 2;
        width: 70%;
    }

    main section:nth-of-type(5) h2 {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    main section:nth-of-type(6){
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    main section:nth-of-type(6) h2{
        grid-column: 1;
        grid-row: 1;
    }

    main section:nth-of-type(6) p{
        grid-column: 1;
        grid-row: 1;
        margin-top: 80px;
    }

    main section:nth-of-type(6) form{
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    main section:nth-of-type(6) form label[for="name"]{
        grid-column: 1;
        grid-row: 1;
    }

    main section:nth-of-type(6) form #name{
        grid-column: 1;
        grid-row: 2;
    }

    main section:nth-of-type(6) form label[for="phone"]{
        grid-column: 2;
        grid-row: 1;
    }

    main section:nth-of-type(6) form #phone{
        grid-column: 2;
        grid-row: 2;
    }

    main section:nth-of-type(6) form label[for="email"]{
        grid-column: 1;
        grid-row: 4;
    }

    main section:nth-of-type(6) form #email{
        grid-column: 1;
        grid-row: 5;
    }

    main section:nth-of-type(6) form label[for="subject"]{
        grid-column: 2;
        grid-row: 4;
    }

    main section:nth-of-type(6) form #subject{
        grid-column: 2;
        grid-row: 5;
    }

    main section:nth-of-type(6) form label[for="message"]{
        grid-column: 1;
        grid-row: 7;
    }

    main section:nth-of-type(6) form textarea{
        grid-column: 1;
        grid-row: 8;
    }

    main section:nth-of-type(6) form button{
        grid-column: 2;
        grid-row: 8;
        width: 20%;
        justify-self: end;
    }

    main section:nth-of-type(7) {
        display: flex
    }


    main section:nth-of-type(8) {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    
    main section:nth-of-type(8) p, main section:nth-of-type(8) h2 {
        grid-column: 1;
        grid-row: 1;
    }

    main section:nth-of-type(8) h2 {
        display: flex;
        align-items: center;
    }

    main section:nth-of-type(8) img {
        grid-column: 2;
        width: 100%;
    }

    main section:nth-of-type(8) img {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
    }
}


main section:nth-of-type(5) ul {
        display:flex;
        overflow:auto;
        scroll-snap-type:x mandatory;
        scroll-behavior:smooth;
        /* zodat je niet per ongeluk 'back' scrollt */
        overscroll-behavior-x:contain;
        
        gap:1em;
        
        /* dunne scrollbar met een kleur */
        /* scrollbar-width:thin; */
        /* scrollbar-color:#f09 transparent; */
        list-style-type: none;
      }

main section:nth-of-type(5) ul li {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1em;
        flex-basis:100%;
        flex-shrink:0;
        scroll-snap-align:center;
        padding-right: 1em;
        background-color:white;

}

main section:nth-of-type(5) ul li img {
     width: 10em;
     height: auto;
     border-radius: 50%;
}

main section:nth-of-type(5) ul:scroll-button(*) {
    /* styling voor de buttons */
    width:3em;
    /* aspect-ratio:1; */
    margin:1em 0 0;
    /* padding:0; */
  
    /* border:10px; */
    border-radius:50%;
    cursor:pointer;
  
    /* font-size:1em; */
    
    /* om de buttons te positioneren tov de lijst */
    position:absolute;
  }

main section:nth-of-type(5) ul {
      /* geen scrollbar */
      scrollbar-width:none;
      
      /* de wrapper voor de bolletjes aanzetten */
      scroll-marker-group: after;
    }
  
    main section:nth-of-type(5) ul::scroll-marker-group {
      height:3em;
      /* beetje witruimte aan de bovenkant en zijkanten */
      margin:1em 3.5em 0;
      
      display: flex;
      flex-wrap:wrap;
      justify-content:center;
      align-content:center;
      row-gap:.25em;
      column-gap:.5em;
    }
  
    main section:nth-of-type(5) li::scroll-marker {
      /* net als een after */
      /* het attribuut komt uit de html - is voor screenreaders */
      content: '' / 'naar' attr(data-label);
      /* styling bolletje */
      width: 0.5em;
      aspect-ratio:1;
      border-radius:50%;
      background-color:grey;

      transition:.25s;
    }
  
     main section:nth-of-type(5) li::scroll-marker:target-current {
      background:black;
    }

    main section:nth-of-type(7) {
        display: grid;
        grid-template-rows: 1fr 1fr;
    }
    
    main section:nth-of-type(7) h2 {
        display: flex;
        font-family: "anton";
        justify-content: center;
        grid-row: 2/3;
        grid-column: 1;
    }
    
    main section:nth-of-type(7) img{
        width: 100%;
        max-height: 40em;
        z-index: -1;
    }
    
    main section:nth-of-type(7) img:nth-of-type(1){
        grid-row: 1/2;
        grid-column: 1;
    }
    
    main section:nth-of-type(7) img:nth-of-type(2){
        height: 100%;
        grid-row: 2/3;
        grid-column: 1;
    }
    
    main section:nth-of-type(7) form{
        display: grid;
        grid-template-columns: 1fr;
        align-self: center;
        width: 100%;
        height: 70%;
        margin: 0 auto;
        grid-row: 2;
        grid-column: 1;
        background-color: #ffffff;
    }
    
    
    main section:nth-of-type(7) form label[for="Volwassen"]{
        grid-row: 4;
        grid-column: 1;
        justify-self: start;
    }
    
    main section:nth-of-type(7) form #Volwassen{
        width: 40%;
        grid-row: 5;
        grid-column: 1;
        justify-self: start;
    }
    
    main section:nth-of-type(7) form label[for="Kinderen"]{
        grid-row: 4;
        grid-column: 1;
        justify-self: end;
    }
    
    main section:nth-of-type(7) form #Kinderen{
        width: 40%;
        grid-row: 5;
        grid-column: 1;
        justify-self: end;
    }
    
    main section:nth-of-type(7) {
        display: grid;
        grid-template-columns: 1fr;
    }
    
    main section:nth-of-type(7) form p{
        display: flex;
        justify-content: center;
    }
    
    main section:nth-of-type(7) form #Tijd{
        display: flex;
        justify-content: center;
    }

/* FOOTER */

footer{
	background-color:#f4f0ee;
	display: grid;
	gap:1em;
	/* flex-direction: column; */
	padding:1em;
}

footer section h3{
	font-family: "anton";
}

footer section p, button{
	font-family: "roboto";
}
/* footer ul:nth-of-type(1){ */
	/* width: 100%; */
/* } */

footer > img:nth-of-type(1) {
	grid-column-start: 1;
	grid-column-end: -1;
	width: 300px;
}

footer section:nth-of-type(2) ul {
	padding:0;
	font-family: "roboto";
}


footer section:nth-of-type(4) {
	display: flex;
	flex-direction: column;
}

footer ul:nth-of-type(1) li:nth-of-type(2) ul{
	padding: 0;
}

/* links onderaan in de footer */
footer > ul {
	padding:0;

	display: flex;
	/* align-self: center; */
	justify-content: center;
	align-items: center;
	/* width: 100%; */

	grid-column-start: 1;
	grid-column-end: -1;
}

@media (min-width: 34em) {
	footer {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 48em) {

    header nav ul li:nth-of-type(3) a {
        border-bottom-color: #a62c21
      }

	footer {
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	}
	footer > img:nth-of-type(1){
		grid-column-start: 1;
		grid-column-end: 2;
		width: 100%;
		padding:1em

	}

}

@media(min-width: 40em) {
    main section:nth-of-type(1){
        display: grid;
        grid-template-columns: 50% 50%;
        
    }
    
    main section:nth-of-type(1) p, main section:nth-of-type(1) h2 {
        grid-column: 1;
        grid-row: 1;
    }

    main section:nth-of-type(1) p:nth-of-type(1) {
        padding-top: 60px;
    }

    main section:nth-of-type(1) p:nth-of-type(2) {
        padding-top: 120px;
    }

    main section:nth-of-type(1) img {
        padding-left: 40px;
        height: auto;
    }

    main section:nth-of-type(2){
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: auto;

	}

	main section:nth-of-type(2) img:nth-of-type(1){
		grid-row-start: 1;
		grid-column: 1;
	}
	
	main section:nth-of-type(2) img:nth-of-type(2){
		grid-row-start: 1;
		grid-column: 2;
		z-index: -1;
	}
	
	main section:nth-of-type(2) img:nth-of-type(3){
		grid-row-start: 1;
		grid-column: 3;
		z-index: -1;
	}

	main section:nth-of-type(2) h2{
		grid-row: 1;
		grid-column: 2;
	}

	main section:nth-of-type(2) p{
		grid-row: 1;
		grid-column: 2;
	}

	main section:nth-of-type(2) button{
		grid-row: 1;
		grid-column: 2;
	}

    main section:nth-of-type(3) {
        display: grid;
        grid-template-columns: 50% 50%;
    }

    main section:nth-of-type(3) h2 {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    main section:nth-of-type(3) p {
        grid-column: 2;
        grid-row: 1;
    }

    main section:nth-of-type(3) button {
        grid-column: 2;
        grid-row: 1;
        width: 10em;
        height: 5em;
        margin-top: 14em;
    }

    main section:nth-of-type(4) {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }

    main section:nth-of-type(4) h2{
        grid-row: 1;
    }

    main section:nth-of-type(4) img{
        grid-row: 2;
        width: 100%;
    }

    main section:nth-of-type(5) h2 {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    main section:nth-of-type(6){
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    main section:nth-of-type(6) h2{
        grid-column: 1;
        grid-row: 1;
    }

    main section:nth-of-type(6) p{
        grid-column: 1;
        grid-row: 1;
        margin-top: 80px;
    }

    main section:nth-of-type(6) form{
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    main section:nth-of-type(6) form label[for="name"]{
        grid-column: 1;
        grid-row: 1;
    }

    main section:nth-of-type(6) form #name{
        grid-column: 1;
        grid-row: 2;
    }

    main section:nth-of-type(6) form label[for="phone"]{
        grid-column: 2;
        grid-row: 1;
    }

    main section:nth-of-type(6) form #phone{
        grid-column: 2;
        grid-row: 2;
    }

    main section:nth-of-type(6) form label[for="email"]{
        grid-column: 1;
        grid-row: 4;
    }

    main section:nth-of-type(6) form #email{
        grid-column: 1;
        grid-row: 5;
    }

    main section:nth-of-type(6) form label[for="subject"]{
        grid-column: 2;
        grid-row: 4;
    }

    main section:nth-of-type(6) form #subject{
        grid-column: 2;
        grid-row: 5;
    }

    main section:nth-of-type(6) form label[for="message"]{
        grid-column: 1;
        grid-row: 7;
    }

    main section:nth-of-type(6) form textarea{
        grid-column: 1;
        grid-row: 8;
    }

    main section:nth-of-type(6) form button{
        grid-column: 2;
        grid-row: 8;
        width: 20%;
        justify-self: end;
    }

    main section:nth-of-type(7) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
    }

    main section:nth-of-type(7) form {
       width: 80%;
    }

    main section:nth-of-type(7) h2, main section:nth-of-type(7) form, main section:nth-of-type(7) img:nth-of-type(2){
        grid-column: 2;
        grid-row: 1;
    }


    main section:nth-of-type(8) {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    
    main section:nth-of-type(8) p, main section:nth-of-type(8) h2 {
        grid-column: 1;
        grid-row: 1;
    }

    main section:nth-of-type(8) h2 {
        display: flex;
        align-items: center;
    }

    main section:nth-of-type(8) img {
        grid-column: 2;
        width: 100%;
    }

    main section:nth-of-type(8) img {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
    }
}