.folders {
  margin: 2% 0;

  .folder-article {
    width: calc(90%/3);
    height: auto;
    padding: 15px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.26);
    background: $formulaire-white;
    margin: 0 1% 1%;

    @media screen and (max-width:$formulaire-screen-mobile){width: calc(90%/2); padding-bottom: 10px; padding-left: 7px; padding-top: 10px;}
    @media screen and (max-width:$formulaire-screen-tablet){width: calc(90%/2); padding-bottom: 10px; padding-left: 7px; padding-top:10px;}
    @media screen and (max-width:$formulaire-screen-laptop){width: calc(90%/2);}


    &.selected { background: $formulaire-blue-transparent }

    &:hover {
      box-shadow: 0 6px 18px rgba(0,0,0,0.26);
      transition : all 0.3s cubic-bezier(.25, .8, .25, 1)
    }
  }

  .folder {
    display: flex;
    align-items: flex-end;

    &-image {
      text-align: center;
    }

    &-infos {
      display: flex;
      flex-direction: column;
      height: 100%;
      margin-left:10px;
      @media screen and (max-width: $formulaire-screen-tablet) { margin-left:20px; }

      .counters {
        font-size: 12px;
        font-style: italic;
        color: $formulaire-grey;
      }
    }
  }
}