.product-list-item {
    width: 16em;
    min-height: 25rem;
    padding: 0.5rem;
    background: var(--page-color);
    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.3);
    border: 1px solid #ddd;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.product-image-container {
    position: relative;
    max-width: 100%;
    height: 10em;
    margin-bottom: 0.5em;
    display: flex;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: center;
    justify-content: center;
}

.product-image {
    max-width: 100%;
    max-height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}

.product-promotion-banner {
    position: absolute;
    color: #FFFFFF;
    background-color: #BD1105;
    font-size: 1rem;
    margin-top: 1rem;
    padding: 0.3rem;
    left: 0px;
    z-index: 1;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.product-name {
    margin-bottom: 0.5rem;
}

.product-id {
    font-size: 0.9em;
}

.product-caption {
    -webkit-flex-grow: 1;
    flex-grow: 1;
    padding: 0.5em;
    display: flex;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    align-items: end;
    justify-content: space-between;
}

.product-price-data {
    min-width: 50%;
    text-align: left;
}

.price-display-span {
    margin-right: 1rem;
    line-height: 1.4;
}

.secondary-price-display-span {
    white-space: nowrap;
    font-size: 14px;
    line-height: 1.4;
}

.product-view-options {
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    -ms-flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

.product-view-data-button {
    padding-block: 4px;
    padding-inline: 6px;
    border-width: 0px;
    border-radius: 0.25rem;
    background-color: green;
    color: white;
    font-size: 1rem;
}

@media (max-width: 576px) {

    .product-list-item {
        width: 100%;
    }
}