main {
    display: grid;
    grid-template-columns: 100%;
    font-family: sans-serif;
    margin-left: .5em;
    margin-right: .5em;
}


/* toaster */
main > img {
grid-area: 1;
width: 100%;
}

/* afbeeldingen toaster */
/* justify content is horizonrtaal */
main > section:nth-of-type(2) {
display: flex;
justify-content: center;
grid-area: 2;
}
main > section:nth-of-type(2) > img  {
height: 5em;
cursor: pointer;
opacity: 21%;
}

/* hover toaster */
main > section:nth-of-type(2) > img:hover {
width: 24%;
opacity: 100%;
}

/* beschrijving tekst toaster */
main > section:nth-of-type(1){
    color: var(--text-color);    
    display: flex;
    flex-wrap: wrap;
    grid-area: 3;
    row-gap: 0.2em;
    }

main > section:nth-of-type(1) > img {
    height: 3em;
    padding-left: 1em;
}

/* sold out is hidden maar moet wel voorgelezen worden, button is disabled dus die slaat hij helemaal over */
main > section:nth-of-type(1) > p:nth-of-type(1) {
    clip: rect(0 0 0 0);
    position: absolute;
}
/* sold out */
main>section>button:nth-of-type(1) {
    width: 100%;
    line-height: 3.5em;
}

/* notify me button */
main > section > button:nth-of-type(2) {
line-height: 3.5em;
border: 0.125em solid var(--border-color);
width: 100%;
background-color: var( --button-bg-color);
font-family: 'Fredoka One', cursive;
}


/* snoeppot afbeelding */
main > section:nth-of-type(1) > p:nth-of-type(2){
    background-image: url("../img/snoep.png");
    background-repeat: no-repeat;
    height: 1.5em;
    width: 18em;
    padding-top: 0.8em;
    background-position-y: bottom;
    text-align: center;
}

/* heart bullet points */
main > section:nth-of-type(1) > ul{
    list-style: none;
    padding-inline-start: 0em;
}
/* display flex zorgt ervoor dat ze automatisch in een colomn of rij worden gezet */
main > section:nth-of-type(1) > ul > li{
    display: flex;
    align-items: baseline;
}
/* css zegt tegen de list tag (ul) om niet normale bullet points te gebruiken. Hij add heart ASCII (getallen die een letter betekenen/icoon) */
 main > section:nth-of-type(1) > ul > li:before {
    content: "\2665";
    color: #000000;
}

main > p {
    width: auto;
}

main>p:nth-of-type(1) {
    background-image: url("../img/rainbow.svg");
    background-color: var(--p1-bg-color);
    background-repeat: no-repeat;
    background-size: 4em;
    padding-top: 3em;
    background-position-x: center;
    grid-area: 4;
    text-align: center;
    height: 4em;
}

main>p:nth-of-type(2) {
    background-color: var(--p2-bg-color);
    grid-area: 5;
    padding-top: 2em;
    text-align: center;
    height: 3em;
}
/* you might also like */
main > h2 {
    grid-area: 6;
}
main > section:nth-of-type(3) {
    grid-area: 7 / 2;
    display:flex;
    overflow: auto;
    grid-column-start: 1;
    grid-column-end: 3;
}

main > section:nth-of-type(3) img {
    width: 19em;
}
/* slide producten afbeeldingen achtergrond */
main > section:nth-of-type(3) section{
    background-color: var( --product-bg-color);
    padding: 0.5em;
}

/* onderste afbeeldingen hover*/
main > section:nth-of-type(3) section:nth-of-type(1) img:hover{
    width: 19em;
    content: url(../img/bak2.jpg);
}
main > section:nth-of-type(3) section:nth-of-type(2) img:hover{
    width: 19em;
    content: url(../img/knuffel2.jpg);
}
main > section:nth-of-type(3) section:nth-of-type(3) img:hover{
    width: 19em;
    content: url(../img/kom1.jpg);
}
main > section:nth-of-type(3) section:nth-of-type(4) img:hover{
    width: 19em;
    content: url(../img/stoel2.jpg);
}
main > section:nth-of-type(3) section:nth-of-type(5) img:hover{
    width: 19em;
    content: url(../img/kaars2.jpg);
}
main > section:nth-of-type(3) section:nth-of-type(6) img:hover{
    width: 19em;
    content: url(../img/kitty2.jpg);
}
@media (min-width: 25em){

 /* onder toaster afbeelding */
main > section:nth-of-type(2) > img  {
    width: 24%;
    height: 100%;
}

main > section:nth-of-type(2) > img:hover  {
    width: 24%;
    height: 100%;
}

}    
@media (min-width: 50em){

main {
    display: grid;
    grid-template-columns: 1fr 28em;
    grid-gap: 1rem;
}
/* sold out/ notify me button */
main > section > button:nth-of-type(-n+2) {
    width: 29em;
}

main > section:nth-of-type(1){
    display: flex;
    flex-wrap: wrap;
    row-gap: 0.2em;
    grid-area: 1 /2;
}
/* de 2 teksten veranderen van plek / grote */
main > p:nth-of-type(1){
    grid-area: 2 / 2;
}

main > p:nth-of-type(2){
grid-area: 3 / 2;
}

main > p {
    width: 25em;
}

}