@import url('./badge.css');
.container-cards {
    .cards-wrapper {
        padding: .25rem .25rem .25rem 1rem !important;

        > a {
            &:last-of-type {
                margin-right: .25rem;
            }
        }

        &::-webkit-scrollbar {
            display: none; /* Chrome/Safari */
        }

        .card {
            position: relative;
            display: flex;
            flex-direction: column;
            width: 220px;
            height: 360px;
            box-shadow: 0px 0 6px rgba(0, 0, 0, .5);
            border-radius: .5rem;
            background-color: var(--white);
            transition: .3s ease-in-out;
            overflow: hidden;

            > header {
                position: relative;
                width: 100%;
                height: 100%;
                max-height: 220px;
                overflow: hidden;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    object-position: center;
                    transition: .3s ease-in-out;
                }
            }

            > section {
                display: flex;
                flex: 1;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
                padding: .5rem;

                section {
                    display: flex;
                    flex-direction: column;

                    h3 {
                        font-size: 1rem;
                        font-weight: 400;
                        color: var(--gray);
                        text-align: center;
                        text-transform: capitalize;
                        display: -webkit-box;
                        line-clamp: 1;
                        -webkit-line-clamp: 1;
                        -webkit-box-orient: vertical;
                        text-overflow: ellipsis;
                        margin-bottom: .5rem;
                        overflow: hidden;
                    }
    
                    p {
                        display: -webkit-box;
                        line-clamp: 2;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        text-overflow: ellipsis;
                        text-align: center;
                        color: var(--dark-gray);
                        overflow: hidden;
                    }

                    &:nth-of-type(2) {
                        color: var(--dark-gray);
                        .old-price {
                            color: var(--gray);

                            span {
                                text-decoration: line-through;
                                color: var(--gray);
                            }
                        }   
                    }
                }
            }

            &:hover {
                header {
                    img {
                        transform: scale(1.1);
                    }
                }
            }
        }
    }
}

@media (min-width: 768px) {
    .container-cards {
        .cards-wrapper {
            .card {
                flex: 0 0 260px;
                height: 400px;
                border: none;
            }
        }
    }
}

@media (min-width: 991px) {
    .container-cards {
        .cards-wrapper {
            .card {
                box-shadow: 0 0 4px 1px rgba(0, 0, 0, .1);
            }
        }
    }
}

@media (min-width: 1200px) {
    .container-cards {
        .cards-wrapper {
            > a {
                &:last-of-type {
                    margin-right: 0;
                }
            }
        }
    }
}