.unordered-list{
    display: flex;
    flex-direction: row;
    max-width: 100%;
    flex-wrap: wrap;
}
li{
    width: 30%;
    margin: 5px;
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.container {
  padding: 2px 16px;
}

ul{
    list-style-type: none;
}

.loader{
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    opacity: 0.8;
}

@media screen and (min-width:320px) and (max-width:640px) {
    body{
        max-height: 100%;
    }

.unordered-list{
    display: flex;
    flex-direction: column;
    max-width: 100%;
}
li{
    width: 80%;
    margin: 5px;
}

.loader{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    opacity: 0.8;
}
}