@import '../variables'; 
@import '../mixins'; 

.exos-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
  grid-auto-flow: dense;
  & > div{
    margin: 2% 0;
    width: max-content;
  }
}

.exo-full{
  & > p{
    font-weight: 700 ;
  }
}

.head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  @include down(840){
    flex-direction: column;
    & * {
      margin: 10px 0;
    }
  }

  &  p {
    font-size: 2em;
    font-weight: 800;
    margin-right: 20px;
    text-align: center;
  }
  & h1{
    display: flex;
    align-items: center;
    gap: 10px;
    & svg{
      fill: white;
      width: 25px;
      height: 25px;
      transition: .3s;
      cursor: pointer;
      &:hover{
        transform: rotate(360deg);
      }
    }
  }
}

.fail, .red{
  color: $red;
}

.success, .green{
  color: $green;
}

.notTrust{
  color: grey;
}

.success, .fail, .noTrust{
  font-weight: 600;
}