.card-container{
    display:flex;
    flex-wrap: wrap;
    flex-direction:row;
    align-items: center;
    justify-content:center;
}

.card{
    margin: 5px;
    border-radius: 10px;
    padding: 10px 5px;
}

.card:hover,
.card:focus{
    transform: scale(1.2);
    transition: 1s;
    z-index: 2;
    box-shadow: 5px 5px 10px #121212;
    background-color: #121212;
    color: white;
}

.img-card{
    border-radius: 10px;
    width: 100%;
    height: auto;
}

.card-title{
    font-size: 1.5em;
    text-align: center;
}

.card-text p{
    font-size: 1em;
    text-transform: capitalize;
    width: 300px;
    padding-left: 10px;
    
      /* These are technically the same, but use both */
    overflow-wrap: break-word;
    word-wrap: break-word;

    -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break: break-all;
  /* Instead use this non-standard one: */
    word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

@media only screen and (max-width: 600px){
    .img-card{
        width: 100%;
        height: auto;
    }

    .card:hover,
    .card:focus{
    transform: scale(1);
    transition: 1s;
    z-index: 2;
    box-shadow: 5px 5px 10px #121212;
    background-color: #121212;
    color: white;
    }
}