:root {
  --main-list-header: #5DBCD2;
  --main-list-footer: #5DBCD2;
}
ul {
  display: grid;
grid-gap: 20px;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
line-height: 1;
padding: 20px;
margin: 0;
}

li {
display: grid;
grid-template-rows: 40px 1fr 30px;
grid-template-columns: 1fr 1fr;
list-style: none;
box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
border: 1px solid #ccc;
border-radius: 20px;
text-align: center;
}

li > .description, li> .name, li> .updated {
  grid-column: span 2;
}

li > * {
margin: 0;
padding-top: 5px;
padding-bottom: 5px;
}

.language > svg {
  height: 20px;
}

li > :first-child {
  color: white;
  background-color: var(--main-list-header);
  border-radius: 20px 20px 0 0;
  padding-top: 10px;

}
li > .description {
  border-bottom: 1px solid black;
}

li > :last-child {
  color: white;
  background-color: var(--main-list-footer);
  border-radius: 0 0 20px 0;
  padding: 10px 0 10px 0;
}
li > :nth-last-child(2) {
  color: white;
  background-color: var(--main-list-footer);
  border-radius: 0 0 0 20px;
  padding: 10px 0 10px 0;
}


/*
.main-content>ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 2fr));
  grid-gap: 20px;
  align-items: stretch;
  line-height: 1;
  padding: 20px;
  margin: 0;
}

.main-content>ul>li {
  display: grid;
  list-style: none;
  box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.3);
  border: 1px solid #ccc;
  grid-template-rows: 40px 1fr 30px 30px 30px 30px 30px;
  border-radius: 20px;
  padding: 10px;
  text-align: center;
}

.main-content img {
  max-width: 100%
} */