product-list {
    /*/
    outline: 1px dotted rgb(255, 38, 38);
    /**/

    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
}

product-list > * {
    width: calc(100% / 1);
    margin-bottom: 5vh;
}

@media only screen and (min-width: 650px) {
    product-list > * {
        width: calc(100% / 2 - 10px);
    }
}

@media only screen and (min-width: 800px) {
    product-list > * {
        width: calc(100% / 3 - 10px);
    }
}

/*
@media only screen and (min-width: 900px) {
    product-list > * {
        width: calc(100% / 4);
    }
}

@media only screen and (min-width: 1050px) {
    v product-list > * {
        width: calc(100% / 5);
    }
}

@media only screen and (min-width: 1200px) {
    product-list > * {
        width: calc(100% / 6);
    }
}

@media only screen and (min-width: 1600px) {
    product-list > * {
        width: calc(100% / 7);
    }
}
*/

product-item {
    /*/
    outline: 1px dotted rgb(255, 38, 38);
    /**/

    display: grid;
    grid-template:
        '🧴' max-content
        '🅰' min-content
        '💸' min-content
        '🔡' min-content
        '💢' min-content
        / 1fr;

    cursor: pointer;
}

product-item * {
    transition: all 0.1s ease-in-out;
}

product-item:hover * {
    opacity: 1;
    filter: saturate(1);
}

product-item product-image {
    /*/
    outline: 1px dotted rgb(255, 38, 38);
    /**/

    z-index: 1;
    order: 1;

    width: 100%;
    aspect-ratio: 1 / 1;
    grid-area: 🧴;

    font-size: 0 /* <- Note: This is a hack to have zero margin on image picture */;
    border-radius: 10px;
    overflow: clip;
    background-image: radial-gradient(circle at 50% 50%, var(--palette-2) 10%, var(--palette-0) 100%)
        /* TODO: [1] Make moving background in the future */;

    opacity: 0.9;
    filter: saturate(0.9);
}

product-item product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: 50% 20%;
}

product-item product-name {
    /*/
    outline: 1px dotted rgb(58, 58, 255);
    /**/

    height: 100%;
    width: 100%;
    grid-area: 🅰;

    text-align: center;
    font-size: 1.4rem;

    margin-top: 8px;
    opacity: 0.9;
}

product-item product-price {
    /*/
    outline: 1px dotted rgb(58, 58, 255);
    /**/

    margin-top: 8px;
    margin-left: auto;
    margin-right: auto;

    white-space: nowrap;
    width: min-content;
    grid-area: 💸;

    text-align: center;
    font-size: 1rem;

    border-radius: 5px;
    border: 1px solid var(--palette-1);
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;

    opacity: 0.9;
}

product-item product-actions {
    /*/
    outline: 1px dotted rgb(58, 58, 255);
    /**/

    height: 100%;
    width: 100%;
    grid-area: 💢;

    text-align: center;
    font-size: 1.3rem;

    margin-top: 4px;

    opacity: 0.8;
}

product-item product-description {
    /*/
    outline: 1px dotted rgb(248 248 57);
    /**/

    height: 100%;
    width: 100%;
    grid-area: 🔡;

    text-align: left;

    font-size: 1rem;

    margin-top: 4px;

    opacity: 0.7;
}

product-item product-description p:not(:last-child) {
    /*/
    outline: 1px dotted rgb(248 248 57);
    /**/

    margin-bottom: 10px;
}