.portfolio {
    /*background-color: #b1b1b1;*/
    background-color: #ffffff;
}

.portfolio .grid__item {
    max-width: 50%;
    margin-bottom: 0;
    opacity: 1;
    transition: all 1s ease;
}

.portfolio .grid__item.hide {
    opacity:0;
    max-width: 0;
    padding: 0;
    overflow: hidden;
    transition: all .4s ease;
}
/*ajout portf*/
.portfolio-filter .grid__item {
    max-width: 50%;
    margin-bottom: 0;
  }


.portfolio-filter a {
    color: #272727;
    background: #EEE;
    display: flex;
    flex: 1;
    justify-content: center;
    padding: 1rem;
    border-radius: 5px;
}



.portfolio-filter a.active {
    color: #fff;
    background: #03409a;
}



@media screen and (max-width: 749px) {
    .portfolio a {
        font-size: 1.4rem;
    }
    
}


@media screen and (min-width: 750px) {
    .portfolio-filter .grid__item {
        max-width: 25%;
    }
    .portfolio .grid__item {
        max-width: 33.3333%;
        margin-bottom: 0;
    }
}

/*
.portfolio {
  background: #F5F5F5;
}

.portfolio .grid__item {
  max-width: 50%;
  margin-bottom: 0;
  opacity: 1;
  transition: all 1s ease;
}

.portfolio .grid__item.hide {
  opacity:0;
  max-width: 0;
  padding: 0;
  overflow: hidden;
  transition: all .4s ease;
}

.portfolio-filters .grid__item {
  max-width: 50%;
  margin-bottom: 0;
}

.portfolio-filters a {
  color: var(--color-body);
  background: #EEE;
  display: flex;
  flex:1;
  justify-content: center;
  padding:1rem;
}

.portfolio-filters a.active {
  color: #FFF;
  background:#5b6c78;
}
*/