body{
  margin: 0;
  line-height: 1.4;
  h1, p{
    font-family: Arial, Helvetica, sans-serif;
  }

  p{
      max-width: 15em;
  }
}

header{
    background-color: #F6F5F5;
    display: flex;
    align-items: center; 
    width: 100%;
}

.div-buttons {
    display: flex;
    align-items: center;
    margin-left: auto;
    height: 50px;
    button{
      background: none;
      border: none;
    }
}

.img-logo-big{
    display: none;
      @media (min-width: 968px) {
        display: block;
        margin: 15px;
      }
}

.img-logo-small {
    margin: 15px;
    display: block;
      @media (min-width: 968px) {
        display: none;
      }
}

.button-list{
    display: flex;
    align-items: center;
    
}

.button-profile{
    display: flex;
    align-items: center;
}

.icon-profile-small{
  display: block;
      @media (min-width: 768px) {
        display: none;
      }
}

.icon-profile-big{
  display: none;
      @media (min-width: 768px) {
        display: block;
      }
}

.create-small{
    display: block;
      @media (min-width: 768px) {
        display: none;
      }
}

.create-big{
    display: none;
      @media (min-width: 768px) {
        display: block;
      }
}

.img-style {
    /* width: 70px; */
    height: 73px;
}

.img-logo-small{
    height: 73px;
}

main{
  background-color: #F6F5F5;
    @media (min-width: 768px) {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr ;
      grid-template-rows: 150px 50px 250px 250px 250px;
    }
}

.section-1{
    height: 300px;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    p{
      grid-column: 2 / 4;
      grid-row: 3 / 4;
      font-size: 14px;
      display: flex;
      align-items: center;
      @media (min-width: 768px) {
        grid-column: 2 / 4;
        grid-row: 6 / 7;
        font-size: 1em;
      }
    }
    h1{
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    font-size: 35px;
    width: 250px;
    margin-left: 20px;
      @media (min-width: 468px) {
        grid-column: 1 / 4;
        grid-row: 1 / 3;
        font-size: 35px;
        width: 9em;
      }
       @media (min-width: 768px) {
        grid-column: 1 / 4;
        grid-row: 3 / 5;
        font-size: 35px;
        width: 9em;
      }
    }
      @media (min-width: 768px) {
        height: 500px;
        grid-column: 1 / 2;
        grid-row: 1 / 3;
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
      }
}


.h1-small{
    display: block;
      @media (min-width: 768px) {
        display: none;
      }
}

.h1-big{
    display: none;
      @media (min-width: 768px) {
        display: block;
        margin: 0;
        margin-left: 20px;
      }
}

.pictures-img{
    grid-column: 1 / 3;
    grid-row: 3 / 4;
    display: flex;
    padding: 0;
    height: 30px;
    width: 50%;
    margin-left: 10px;
    li {
      margin-left: -25px; 
    }
    li:first-child {
      margin-left: 0; 
    }
    img {
      height: 3em;
      width: 3em;
    }
      @media (min-width: 768px) {
              grid-column: 1 / 3;
              grid-row: 6 / 7;
            }
}

.section-articles-titel{
    @media (min-width: 768px) {
            grid-column: 3 / 6;
            margin-left: -90px;
          }
}

.section-articles{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  max-width: calc(3 * 150px + 2 * 1rem);
  margin-bottom: 60px;
  h2{
    display: none;
      @media (min-width: 768px) {
          display: block;
        }
  }
  
  article{
    margin: 5px;
    width: 90%;
    height: 280px;
    p{
      margin-top: 30px;
      margin-left: 5px;
    }
      @media (min-width: 768px) {
            height: 300px;
            margin: 15px;
            p{
              margin-top: 60px;
            }
          }
  }
      @media (min-width: 768px) {
            grid-column: 3 / 7;
            grid-row: 2 / 5;
            height: 650px;
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* 3 naast elkaar */
            gap: 1rem;
            max-width: 70%;
            /* margin-left: 100px; */
            place-content: center;
          }

}

.button-filter{
  display: none;
    @media (min-width: 768px) {
          display: block;
        }
}

.img-article{
  
}

.div-article-img{
  display: grid;
  height: 50%;
  position: relative;
  button{
    border: 0;
    height: 30px;
    width: 30px;
    position: absolute;
    top: 15px;
    right: 10px;
    /* background-image: url("../assets/create-your-list-klein.png"); */
    /* background-size: contain; */
    display: flex;
    justify-content: center; /* horizontaal centreren */
    align-items: center;
    img{
      object-fit: contain;
      height: 50px;
      width: 50px;
    }
  }
}

.afbeelding-big{
 display: none;
  @media (min-width: 768px) {
          display: block;
        }
}

.afbeelding-small{
  display: block;
   @media (min-width: 768px) {
          display: none;
        }
}

.zoekbalk-container-mobile{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background-color: none;
  display: grid;
  place-items: center;
  border-radius: 10px;

  input{
    height: 70%;
    width: 95%;
    border-radius: 30px;
    font-size: 15px;
    display: grid;
    place-items: center;
  }
    @media (min-width: 768px) {
          display: none;
        }
}

.zoekbalk-container-desktop{
  display: none;
  input{
    height: 70%;
    width: 95%;
    border-radius: 30px;
    font-size: 15px;
    display: grid;
    place-items: center;
  }
   @media (min-width: 768px) {
          display: block;
          margin-left: 10px;
          width: 130%;
          grid-column: 1/ 3;
          grid-row: 5 / 6;
        }
}

footer{
  width: 100%;
  /* height: 400px;  */
  margin-top: -60px;
  background-color: black;
}

form{
  height: 80px;
  background-color: gold;
  p{
    margin: 0;
    color: black;
    max-width: 20em;
  }
  h3{
    margin: 0;
  }
}

.footer-links{
  display: flex;
  justify-content: space-evenly;
  flex-direction: column;
    @media (min-width: 768px) {
      flex-direction: row;
      margin-top: 30px;
    }
}

.footer-col{
  h3{
    color: white;
  }
  li{
    color: white;
  }
  a{
    color: white;
    margin-left: 25px;
  }
}

.legal p{
  color: white;
}