.product-card {
    background: #FFFFFF;
    border: 1px solid #E7EAF4;  
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.product-card:hover {
    box-shadow: 0 0 10px 5px rgba(221, 221, 221, 1);
}

.product-card__top-label-box {
    position: absolute;
    display: flex;
}

.product-card__top-label {
    padding: 8px 16px;
    /* padding: 10% 20%; */
    text-align: center;
    text-transform: uppercase;
    color: #FFFFFF;  
    background-color: #201E1E;  
    margin-right: 5px;
}

.product-card__top-label.red {
    background-color: #ED2438;
}

.product-card__top-label.light-red {
    background-color: #FF364A;
}

.product-card img {
    height: 100%;
    max-height: 348px;
    object-fit: contain;
    object-position: top;
}

.product-card__inform-box {
    padding: 4%;
}

.product-card__grade {
    display: flex;
    align-items: center;
}

.product-card__grade svg {
    margin-right: 1%;
}

.product-card__comment {
    font-size: calc(11px + 2*(100vw / 1920));
    color: #6C6F79;
    margin-left: 2%;
}


.product-card__class {
    color: #6C6F79;
    margin-top: 10px;
}

.product-card__inform {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-top: 10px;
}

.product-card__title {
    font-family: 'Kelson Sans Bold';
    color: #201E1E;
    line-height: 130%;
    width: 50%;
}

.product-card__price {
    color: #201E1E;
    white-space: nowrap;
    line-height: 130%;
}

.product-card__inform-price-box {
    display: flex;
    flex-direction: column;
    align-items: end;
}

.product-card__price--old {
    margin-top: -30%;
    text-decoration: line-through;
    color: #6C6F79;    
}


.product-card__label-heart, .product-card__label-arrows   {
    padding: 12px;
}

.product-card__label-heart, .product-card__label-arrows  {
    position: absolute;
    right: 0;
    padding: 12.5px;
    background-color: #F8F9FD;
}


.product-card__img-box {
    height: 100%;
}

@media (max-width: 768px) {
    .product-card__comment {
        font-size: calc(11px + (2+2*0.7)*((100vw - 320px) / 1920));
    }

    .product-card img {
        max-height: 348px;
        /*object-fit: cover;*/
        object-position: center;
    }
}


@media (max-width: 360px) {
    .product-card__top-label {
        padding: 5px 9px
    }

    .product-card__grade svg {
        width: 13px;
        height: 13px;
    }

    .product-card__label-heart, .product-card__label-arrows {
        padding: 6.5px;
    }

    .product-card__inform {
        flex-direction: column; 
        align-items: flex-start;  
    }
    .product-card__title {
        width: 100%;
    }
    .product-card__price--old {
        display: none;
    }
}



/* 

                <div class="product-card">
                    <div class="product-card__top-label-box">
                        <p class="text-14-reg product-card__top-label">хит</p>
                        <p class="text-14-reg product-card__top-label red">-20%</p>                    
                    </div>

                    <div class="product-card__label-heart">
                        <svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M8 13.875C8 13.875 0.1875 9.50001 0.1875 4.18751C0.1875 3.24836 0.512886 2.33821 1.1083 1.61193C1.70371 0.885641 2.53236 0.38808 3.45328 0.203897C4.37419 0.0197146 5.33047 0.160288 6.15943 0.601701C6.98838 1.04311 7.63879 1.7581 8 2.62501C8.36121 1.7581 9.01162 1.04311 9.84057 0.601701C10.6695 0.160288 11.6258 0.0197146 12.5467 0.203897C13.4676 0.38808 14.2963 0.885641 14.8917 1.61193C15.4871 2.33821 15.8125 3.24836 15.8125 4.18751C15.8125 9.50001 8 13.875 8 13.875Z" fill="#ED2438"/>
                        </svg>
                    </div>

                    <div class="product-card__label-arrows">
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M8.75 13.75L6.25 16.25L3.75 13.75" stroke="#ED2438" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M6.25 3.75V16.25" stroke="#ED2438" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M11.25 6.25L13.75 3.75L16.25 6.25" stroke="#ED2438" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M13.75 16.25V3.75" stroke="#ED2438" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </div>

                    <div class="product-card__img-box">
                        <img src="./img/goods-card-main/item1.png" alt="">                        
                    </div>

                    <div class="product-card__inform-box">
                        <div class="product-card__grade">
                            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M16.8187 6.84844C16.7483 6.62694 16.6127 6.43188 16.4295 6.28885C16.2463 6.14581 16.0241 6.06147 15.7922 6.04688L11.6156 5.75859L10.0687 1.85625C9.98428 1.64138 9.83726 1.45681 9.64671 1.32643C9.45617 1.19606 9.23087 1.12589 8.99999 1.125C8.76912 1.12589 8.54382 1.19606 8.35328 1.32643C8.16273 1.45681 8.01571 1.64138 7.93124 1.85625L6.35625 5.77969L2.20781 6.04688C1.97613 6.06241 1.75445 6.14711 1.57143 6.29001C1.38842 6.43291 1.25249 6.62744 1.18124 6.84844C1.10808 7.07282 1.1038 7.31398 1.16897 7.54081C1.23414 7.76765 1.36576 7.96976 1.54687 8.12109L4.73906 10.8211L3.78984 14.5547C3.72416 14.8073 3.73598 15.0738 3.82376 15.3195C3.91153 15.5653 4.07121 15.779 4.28203 15.9328C4.48666 16.0797 4.73046 16.1621 4.98223 16.1697C5.23399 16.1772 5.48228 16.1094 5.69531 15.975L8.99296 13.8867H9.00703L12.5578 16.1297C12.74 16.2481 12.9523 16.3115 13.1695 16.3125C13.3469 16.3111 13.5216 16.2691 13.6801 16.1896C13.8387 16.1101 13.977 15.9954 14.0843 15.8541C14.1915 15.7129 14.265 15.5489 14.299 15.3749C14.333 15.2008 14.3267 15.0212 14.2805 14.85L13.275 10.7648L16.4531 8.12109C16.6342 7.96976 16.7659 7.76765 16.831 7.54081C16.8962 7.31398 16.8919 7.07282 16.8187 6.84844Z" fill="#ED2438"/>
                            </svg>
                            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M16.8187 6.84844C16.7483 6.62694 16.6127 6.43188 16.4295 6.28885C16.2463 6.14581 16.0241 6.06147 15.7922 6.04688L11.6156 5.75859L10.0687 1.85625C9.98428 1.64138 9.83726 1.45681 9.64671 1.32643C9.45617 1.19606 9.23087 1.12589 8.99999 1.125C8.76912 1.12589 8.54382 1.19606 8.35328 1.32643C8.16273 1.45681 8.01571 1.64138 7.93124 1.85625L6.35625 5.77969L2.20781 6.04688C1.97613 6.06241 1.75445 6.14711 1.57143 6.29001C1.38842 6.43291 1.25249 6.62744 1.18124 6.84844C1.10808 7.07282 1.1038 7.31398 1.16897 7.54081C1.23414 7.76765 1.36576 7.96976 1.54687 8.12109L4.73906 10.8211L3.78984 14.5547C3.72416 14.8073 3.73598 15.0738 3.82376 15.3195C3.91153 15.5653 4.07121 15.779 4.28203 15.9328C4.48666 16.0797 4.73046 16.1621 4.98223 16.1697C5.23399 16.1772 5.48228 16.1094 5.69531 15.975L8.99296 13.8867H9.00703L12.5578 16.1297C12.74 16.2481 12.9523 16.3115 13.1695 16.3125C13.3469 16.3111 13.5216 16.2691 13.6801 16.1896C13.8387 16.1101 13.977 15.9954 14.0843 15.8541C14.1915 15.7129 14.265 15.5489 14.299 15.3749C14.333 15.2008 14.3267 15.0212 14.2805 14.85L13.275 10.7648L16.4531 8.12109C16.6342 7.96976 16.7659 7.76765 16.831 7.54081C16.8962 7.31398 16.8919 7.07282 16.8187 6.84844Z" fill="#ED2438"/>
                            </svg>
                            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M16.8187 6.84844C16.7483 6.62694 16.6127 6.43188 16.4295 6.28885C16.2463 6.14581 16.0241 6.06147 15.7922 6.04688L11.6156 5.75859L10.0687 1.85625C9.98428 1.64138 9.83726 1.45681 9.64671 1.32643C9.45617 1.19606 9.23087 1.12589 8.99999 1.125C8.76912 1.12589 8.54382 1.19606 8.35328 1.32643C8.16273 1.45681 8.01571 1.64138 7.93124 1.85625L6.35625 5.77969L2.20781 6.04688C1.97613 6.06241 1.75445 6.14711 1.57143 6.29001C1.38842 6.43291 1.25249 6.62744 1.18124 6.84844C1.10808 7.07282 1.1038 7.31398 1.16897 7.54081C1.23414 7.76765 1.36576 7.96976 1.54687 8.12109L4.73906 10.8211L3.78984 14.5547C3.72416 14.8073 3.73598 15.0738 3.82376 15.3195C3.91153 15.5653 4.07121 15.779 4.28203 15.9328C4.48666 16.0797 4.73046 16.1621 4.98223 16.1697C5.23399 16.1772 5.48228 16.1094 5.69531 15.975L8.99296 13.8867H9.00703L12.5578 16.1297C12.74 16.2481 12.9523 16.3115 13.1695 16.3125C13.3469 16.3111 13.5216 16.2691 13.6801 16.1896C13.8387 16.1101 13.977 15.9954 14.0843 15.8541C14.1915 15.7129 14.265 15.5489 14.299 15.3749C14.333 15.2008 14.3267 15.0212 14.2805 14.85L13.275 10.7648L16.4531 8.12109C16.6342 7.96976 16.7659 7.76765 16.831 7.54081C16.8962 7.31398 16.8919 7.07282 16.8187 6.84844Z" fill="#ED2438"/>
                            </svg>
                            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M16.8187 6.84844C16.7483 6.62694 16.6127 6.43188 16.4295 6.28885C16.2463 6.14581 16.0241 6.06147 15.7922 6.04688L11.6156 5.75859L10.0687 1.85625C9.98428 1.64138 9.83726 1.45681 9.64671 1.32643C9.45617 1.19606 9.23087 1.12589 8.99999 1.125C8.76912 1.12589 8.54382 1.19606 8.35328 1.32643C8.16273 1.45681 8.01571 1.64138 7.93124 1.85625L6.35625 5.77969L2.20781 6.04688C1.97613 6.06241 1.75445 6.14711 1.57143 6.29001C1.38842 6.43291 1.25249 6.62744 1.18124 6.84844C1.10808 7.07282 1.1038 7.31398 1.16897 7.54081C1.23414 7.76765 1.36576 7.96976 1.54687 8.12109L4.73906 10.8211L3.78984 14.5547C3.72416 14.8073 3.73598 15.0738 3.82376 15.3195C3.91153 15.5653 4.07121 15.779 4.28203 15.9328C4.48666 16.0797 4.73046 16.1621 4.98223 16.1697C5.23399 16.1772 5.48228 16.1094 5.69531 15.975L8.99296 13.8867H9.00703L12.5578 16.1297C12.74 16.2481 12.9523 16.3115 13.1695 16.3125C13.3469 16.3111 13.5216 16.2691 13.6801 16.1896C13.8387 16.1101 13.977 15.9954 14.0843 15.8541C14.1915 15.7129 14.265 15.5489 14.299 15.3749C14.333 15.2008 14.3267 15.0212 14.2805 14.85L13.275 10.7648L16.4531 8.12109C16.6342 7.96976 16.7659 7.76765 16.831 7.54081C16.8962 7.31398 16.8919 7.07282 16.8187 6.84844Z" fill="#ED2438"/>
                            </svg>
                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M8.30943 12.4086L11.8532 14.6586C12.3102 14.9469 12.8727 14.518 12.7391 13.9906L11.7126 9.95469C11.6848 9.84282 11.6892 9.72538 11.7253 9.61591C11.7614 9.50644 11.8276 9.40939 11.9165 9.33594L15.0946 6.68516C15.5094 6.34063 15.2985 5.64453 14.7571 5.60938L10.6087 5.34219C10.4955 5.3356 10.3866 5.29619 10.2955 5.22876C10.2043 5.16133 10.1348 5.06881 10.0954 4.9625L8.5485 1.06719C8.50755 0.954621 8.43295 0.857379 8.33484 0.788665C8.23672 0.71995 8.11984 0.68309 8.00006 0.68309C7.88027 0.68309 7.76339 0.71995 7.66528 0.788665C7.56716 0.857379 7.49257 0.954621 7.45162 1.06719L5.90475 4.9625C5.86532 5.06881 5.79578 5.16133 5.70463 5.22876C5.61348 5.29619 5.50466 5.3356 5.39146 5.34219L1.24303 5.60938C0.70162 5.64453 0.490683 6.34063 0.905527 6.68516L4.08365 9.33594C4.17248 9.40939 4.23875 9.50644 4.27483 9.61591C4.3109 9.72538 4.31532 9.84282 4.28756 9.95469L3.33834 13.6953C3.17662 14.3281 3.85162 14.8414 4.39303 14.4969L7.69068 12.4086C7.78316 12.3498 7.89047 12.3186 8.00006 12.3186C8.10964 12.3186 8.21696 12.3498 8.30943 12.4086V12.4086Z" stroke="#6C6F79" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                            <a class="product-card__comment">6 отзывов</a>
                        </div>                    
                        <p class="text-14-reg product-card__class">Ракетка для бадминтона</p>
                        <div class="product-card__inform">
                            <a class="text-18-reg product-card__title">Ракетка LI-NING CARBON GRAPHITE A700</a>
                            <div class="product-card__inform-price-box">
                                <span class="text-20-light product-card__price--old">2777 <span class="good-card__valuta">₽</span></span>
                                <span class="text-25-reg good-card__price">1500 <span class="valuta">₽</span></span>
                            </div>
                            
                        </div>  
                    </div>     
                </div>



*/