.container {
  display: flex;
  flex-direction: column;
  padding: 5% 15%;
  width: 100vw;
  height: 100%;
  overflow-y: auto;
  scrollbar-color: var(--secondary-color) transparent;
}

.container .container-item {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 15vh;
}

.card {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 10vh;
  border-radius: 0 40px;
  background-color: var(--secondary-color);
  color: black;
}

.card {
  animation: appear 5s cubic-bezier(0.69, -0.41, 0.29, 1.32);
  animation-timeline: view();
  animation-range: entry 10% cover 30%;
  animation-fill-mode: both;
}

.card svg {
  position: absolute;
  top: 5%;
  left: 5%;
}

.card-title {
  color: var(--tertiary-color);
}
.card-price {
  font-size: 9pt;
  color: darkblue;
}

h1 {
  color: var(--tertiary-color);
  text-align: center;
  margin-bottom: 5vh;
}

@keyframes appear {
  0% {
    opacity: 0;
    scale: 0.75;
  }

  100% {
    opacity: 1;
    scale: 1;
  }
}