.table-content
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;

	width: inherit;
	padding-left: 3%;
	padding-right: 3%;
}


.table-content > span
{ transition: background-color 0.5s ease-in-out, border-image 0.5s ease-in-out;
	width: 160px;
	height: auto;
	margin: 30px;
	border-radius: 20px;
}

.table-content > span > img
{
	width: 120px;
	height: 100px;
}

.table-content > span > img, .table-content > span > h2
{
	margin: 20px;
}

.table-content > span:hover
{
  background-color: var(--background-dark);
  border-image: linear-gradient(to bottom, var(--background), var(--background-dark));
}

/* Teste abaixo */

.card-container {
	width: 120px;
	height: 100px;
}

.card-container > img {
	width: 100px;
	display: none;
}

.loading {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 140px;
}

.loading > div {
  position: absolute;
  top: 63px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #ddd;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.loading > div:nth-child(1) {
  left: 8px;
  animation: loading1 0.6s infinite;
}

.loading > div:nth-child(2) {
  left: 8px;
  animation: loading2 0.6s infinite;
}

.loading > div:nth-child(3) {
  left: 32px;
  animation: loading2 0.6s infinite;
}

.loading div:nth-child(4) {
  left: 56px;
  animation: loading3 0.6s infinite;
}

@keyframes loading1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes loading3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}

@keyframes loading2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}