.card-section {
  display: grid;
  gap: var(--padding-between-items);
  padding: var(--padding-default);
  width: 100%;
  grid-template-columns: repeat(3, 1fr); /* Default: 3 cards per row */
}
@media screen and (max-width: 1280px) {
  .card-section {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 750px) {
  .card-section {
    grid-template-columns: 1fr;
  }
}

.card-frame {
  perspective: 1000px;
}

.card-content {
  background: var(--background-card);
  padding: var(--padding-default);
  border-radius: 1rem;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-shadow: 0 0.25rem 0.5rem 0 rgba(0,0,0,0.1);
}

.card-frame:hover .card-content, .card-frame:active .card-content {
  transform: rotateY(180deg);
}

.front, .back {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: var(--padding-default);
  width: 100%;
  transform: translate(-50%, -50%);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  color: var(--on-background-card);
}

.front {
  font-size: var(--medium);
}

.back {
  font-size: var(--small);
  transform: translate(-50%, -50%) rotateY(180deg);
}

ul {
  margin-top: 0 !important;
}

ul > li {
  padding: 0.5rem var(--padding-default);
  font-size: var(--medium);
}

/* For every table row */
table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 0.5rem;
  padding: var(--padding-default);
  outline: thick double #ABABC0;
}

/*
tr:nth-child(even) {

}
tr:first-child {
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
}
tr:last-child {
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 24px;
}
*/

/* For every table cell */
td {
  font-size: var(--medium);
  padding: 0.75rem 1rem;
}

tr {
  border-bottom: 0.125rem solid #ABABC0;
}

tr:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

/* For every text cell */
td:nth-child(1) {
  border-right: 0.125rem solid #ABABC0;
}

/* For every price cell */
td:nth-child(2) {
  text-align: right;
}

#price-list {
  margin: 0.75rem;
}

@media screen and (max-width:800px) {
  #price-list {
    margin: 0;
  }
}

.price-list-caption {
  margin: var(--padding-default) 0;
  font-size: var(--medium);
}

.price-list-caption-small {
  margin: var(--padding-default) 0;
  font-size: var(--smaller);
}