.card-list-container {
    position: relative;
}

.card-list-container .slide-button {
    top: calc(var(--size-half) - var(--space-4));
}

.card-list-container .slide-button[data-direction="left"] {
    left: calc(var(--space-1) * 3);
}

.card-list-container .slide-button[data-direction="right"] {
    right: calc(var(--space-1) * 3);
}

.card-list {
    flex-wrap: wrap;
    width: var(--size-full);
    padding: calc(var(--space-2) * 1.5);
    border-radius: calc(var(--rounding-2) * 3) ;
    box-shadow: 0 0 var(--size-3) 0 var(--black-opacity-5);
    transition: var(--time-5);
}

.card-list.horizontal-scroll {
    overflow-x: auto;
    flex-wrap: nowrap;
}

.card-list.vertical-scroll {
    overflow-y: auto;
    max-height: 10vh;
}

.card-list.open {
    flex-wrap: wrap;
    transform: translateY(var(--space-5)) !important;
}

.card-item {
    height: fit-content;
    padding: var(--space-2)
}

.card-wrapper {
    width: var(--size-full);
    height: var(--size-full);
    transition: var(--time-4);
}

.card-wrapper:hover .card {
    box-shadow: 0 0 var(--size-2) 0 var(--black-opacity-5);
}

.card-wrapper:hover .card-image img {
    transform: perspective(0px);
    scale: 1.05;
}

.card {
    overflow: hidden;
    gap: var(--space-1);
    width: var(--size-full);
    height: var(--size-full);
    padding: calc(var(--space-1) * 1.5);
    background-color: var(--neutral-0);
    border-radius: var(--rounding-3);
    transition: var(--time-4);
}

.card-image {
    display: flex;
    overflow: hidden;
    width: var(--size-full);
    height: auto;
    border-radius: var(--rounding-2);
}

.card-image img {
    width: var(--size-full);
    height: inherit;
    object-fit: cover;
    transition: var(--time-4);
}

.card-text {
    position: relative;
    gap: var(--space-2);
    overflow: hidden;
    padding: calc(var(--space-2) * 1.5);
}

.card-title {
    height: fit-content;
    font-size: var(--font-size-3);
}

.card-price {
    font-family: var(--serif-font);
    font-size: var(--font-size-3);
    font-weight: 500;
    color: var(--accent-1);
}

.card-item {
    height: var(--size-fit);
}

.card-item.tiny {
    width: var(--size-fifth);
    min-width: var(--size-fifth);
}

.card-item.tiny .card-image {
    height: var(--size-6);
    min-height: var(--size-6);
}

.card-item.small {
    width: var(--size-quart);
    min-width: var(--size-quart);
}

.card-item.small .card-image {
    height: var(--size-6);
    min-height: var(--size-6);
}

.card-item.medium {
    width: var(--size-third);
    min-width: var(--size-third);
}

.card-item.medium .card-image {
    height: var(--size-5);
    min-height: var(--size-5);
}

.card-item.big {
    min-width: var(--size-half);
    width: var(--size-half);
    height: var(--size-9);
}

.card-item.big .card-image {
    height: var(--size-6);
    min-height: var(--size-6);
}