html {
    font-size: 100%;
}
.list__product {
    position: relative;
    display: grid;
    grid-template: min-content min-content 1fr/min-content auto;
    align-items: center;
    column-gap: 1rem;
    padding: 1rem 0
}

.list__product:not(:last-child) {
    border-bottom: 1px solid #e6e6e6
}

@media (min-width: 75rem) {
    .list__product {
        grid-template-columns:min-content auto 15rem;
        grid-auto-flow: column;
        align-items: start;
        align-content: start;
        padding: 2rem 0
    }
}

.list__product-img {
    grid-row: 1/span 3
}

.list__product-img img {
    max-width: 6rem;
    height: auto
}

@media (min-width: 75rem) {
    .list__product-img img {
        max-width:12rem
    }
}

.entry-content h2.list__product-title {
    font-size: 17px;
    margin: 0
}
.list__product-authors{
    font-size: 12px;
}

@media (min-width: 75rem) {
    .list__product-title {
        font-size:1.25rem
    }
}



@media (min-width: 75rem) {
    .list__product-top,.list__product-discount-label {
        position:static
    }
}

.list__product-top+span,.list__product-discount-label+span {
    top: 28px
}

.list__product-desc {
    display: none
}

@media (min-width: 75rem) {
    .list__product-desc {
        display:block;
        font-size: .875rem;
        font-weight: 300
    }
}

.list__product-desc .download-btns-row {
    margin-top: 1rem
}

.list__product-autor {
    display: inline;
    color: #8e8e8e;
    font-size: .75rem
}

.list__product-autor+.list__product-autor:before {
    content: ", "
}

.list__product-price-container {
    display: grid;
    grid-template-columns: max-content min-content;
    column-gap: 1rem;
    align-items: center;
    justify-content: end
}

@media (min-width: 25rem) {
    .list__product-price-container {
        grid-template-columns:auto max-content min-content;
        justify-content: initial
    }
}

@media (min-width: 75rem) {
    .list__product-price-container {
        grid-row:1/span 3;
        display: block;
        text-align: center;
        align-self: center
    }
}

.list__product-price {
    order: 2;
    font-size: 1.875rem;
    color: #3185bc;
    font-weight: bold
}

.list__product-discount {
    display: none;
    order: 1;
    font-size:10px
}

@media (min-width: 25rem) {
    .list__product-discount {
        display:block
    }
}

@media (min-width: 75rem) {
    .list__product-discount {
        font-size:.75rem
    }
}

.list__product-regular-price {
    color: #8e8e8e
}

.list__product-discount-percent {
    font-weight: bold;
    color: #ff0058
}

.list__product-availability {
    display: none
}

@media (min-width: 75rem) {
    .list__product-availability {
        display:block;
        margin: 8px 0;
        font-size: .875rem;
        font-weight: bold;
        color: #3dd048
    }
}

.list__product-availability-out-of-stock {
    color: #3185bc
}

.list__product-availability-sold-out {
    color: #333
}

.list__product-add-to-cart {
    order: 3;
    display: inline-block;
    margin-top: 8px
}

.list__product-button {
    display: inline-flex;
    align-items: center
}

.list__product-button::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url(images/cart.svg);
    background-size: contain
}

@media (min-width: 75rem) {
    .list__product-button::before {
        margin-right:8px
    }

    .list__product-button {
        padding-left: 2rem;
        padding-right: 2rem
    }
}

.list__product-button span {
    display: none
}

@media (min-width: 75rem) {
    .list__product-button span {
        display:inline;
        font-weight: bold
    }
}

.label--top {
    background-color: #3185bc;
    padding: 4px 8px;
    display: inline-block;
    border-radius: 4px;
    font-size:10px;
    color: #fff;
    margin-left: 16px;
    box-shadow: 0 4px 6px rgba(0,0,0,.16);
}
.list__product-top, .list__product-discount-label {
    position: absolute;
    top: 1rem;
    left: 0;
}
@media (min-width: 75rem){
    .list__product-top, .list__product-discount-label {
        position: static;
    }
}


label{
    isplay: inline-block;
    border-radius: 4px;
    font-size:10px;
    color: #fff;
}

.label--discount {
    background-color: #ff0058;
    padding: 4px 8px;
    display: inline-block;
    border-radius: 4px;
    font-size:10px;
    color: #fff;
    margin-left: 16px;
}


.list__product-discount-label{
    box-shadow: 0 4px 6px rgba(0,0,0,.16);
}