@import "../../app/variables";

.card-one {

    .font-10 {
        font-size: 0.625rem !important;
    }

    .font-11 {
        font-size: 0.6875rem !important;
    }

    .font-12 {
        font-size: 0.75rem !important;
    }

    .font-13 {
        font-size: 0.8125rem !important;
    }

    .font-14 {
        font-size: 0.875rem !important;
    }

    .font-15 {
        font-size: 0.9375rem !important;
    }

    .slide {
        .img-container {
            width: 142px;
            height: 142px;
        }

        .text {
            h6 {
                font-size: 0.6875rem;
                overflow: visible;
                text-decoration-line: line-through;
            }

            .title {
                font-size: 0.75rem;
                font-weight: 800;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }

        .icon {
            width: 49px;
            height: 49px;
            bottom: -20px;
            background-color: $text-medium;
            transition: 300ms;

            &:hover {
                i {
                    color: $primary-coral !important;

                }
            }
        }
    }

    .swiper-slide {
        transition: all 0.3s ease;
        z-index: 1;
        min-height: 277px;
        height: auto;
        overflow: visible;
        background-color: $pure-white;
        transition: box-shadow 0.3s ease;
        cursor: pointer;

        &:hover {
            box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);
        }
    }

    .like {
        color: $text-medium;
        transition: 300ms;

        &:hover {
            color: $primary-coral;
        }
    }
}

.nav-btn {
    width: 40px;
    height: 40px;
}

@media screen and (max-width: 576px) {
    .info {
        align-items: center !important;
    }

    .info p {
        font-size: 1.125rem;
    }
}