.wc-block-grid__products {
    display: grid;
    gap: var(--wp--preset--spacing--20);
    grid-template-columns: repeat(3, 1fr);
}

.wc-block-product,
.wc-block-grid__product {
    position: relative;
    box-sizing: border-box;
    aspect-ratio: 23/13;
    display: grid;
    grid-template-rows: auto min-content auto;
    grid-template-areas: 'top'
    'content-1'
    'content-2'
    'content-3'
    'content-4'
    'bottom';
    border-radius: var(--wp--custom--border-radius--block);
    overflow: hidden;
    border: none;
    background-color: #E0E0E0;
}

.wc-block-product::before,
.wc-block-grid__product::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: #ffffff;
}

.wc-block-product::before {
    opacity: 0;
    transition-delay: 100ms;
    transition-property: opacity;
    transition-duration: 200ms;
    transition-timing-function: linear;
}

.wc-block-product :where(
.wp-block-post-title,
.taxonomy-product_cat,
.wp-block-post-terms,
.wc-block-components-product-title,
.wc-block-components-product-price,
.wc-block-components-product-button
) {
    --_transition--delay: 0ms;
    --_transition--delay-offset: 0ms;
    opacity: 0;
    translate: 0 20px;
    transition-property: opacity, translate;
    transition-delay: calc(var(--_transition--delay) + var(--_transition--delay-offset));
    transition-duration: 150ms;
    transition-timing-function: var(--transition--timing-function);
}

.wc-block-product:hover::before {
    opacity: 1;
    transition-delay: 0ms;
    transition-timing-function: var(--transition--timing-function);
}

.wc-block-product:hover :where(
.wp-block-post-title,
.taxonomy-product_cat,
.wp-block-post-terms,
.wc-block-components-product-title,
.wc-block-components-product-price,
.wc-block-components-product-button
) {
    --_transition--delay: 200ms;
    opacity: 1;
    translate: 0 0;
    transition-duration: 800ms;
    transition-timing-function: var(--timing-function--ease-out-quint);
}

.wc-block-components-product-button .wc-block-components-product-button__button {
    width: auto;
    padding-inline: 40px;
}

.wc-block-product:hover :where(
.taxonomy-product_cat,
.wp-block-post-terms
) {
    --_transition--delay-offset: 50ms;
}

.wc-block-product:hover :where(
.wc-block-components-product-button
) {
    --_transition--delay-offset: 100ms;
}

.wc-block-product:hover :where(
.wc-block-components-product-price
) {
    --_transition--delay-offset: 150ms;
}

.wc-block-components-product-image {
    grid-row-start: top;
    grid-row-end: bottom;
    grid-column: 1;
    z-index: 0;
    margin: 0;
}

.wc-block-components-product-image a {
    display: block;
    overflow: hidden;
}

.wc-block-components-product-image img {
    aspect-ratio: 23/13;
    object-fit: contain !important;
}

.wc-block-product .wp-block-post-title,
.wc-block-components-product-title {
    grid-area: content-1;
    z-index: 2;
    margin-bottom: 0 !important;
    font-size: 32px;
    color: var(--wp--preset--color--accent-2);

    a:hover {
        text-decoration: none;
    }
}

.taxonomy-product_cat,
.wp-block-post-terms {
    grid-area: content-2;
    z-index: 2;
}

.taxonomy-product_cat a,
.wp-block-post-terms a {
    font-size: var(--wp--preset--font-size--small);
    font-weight: 600;
    color: var(--wp--preset--color--accent-5);
}

.wc-block-components-product-button {
    grid-area: content-3;
    z-index: 2;
}

.wp-block-woocommerce-product-price {
    grid-area: content-4;
    z-index: 2;
    font-size: 25px;
    font-weight: 700;
    color: var(--wp--preset--color--accent-1);
}

.wc-block-product-template__responsive {
    grid-template-columns: 1fr !important;
}

@media screen and (max-width: 520px) {
    .wp-block-post-terms,
    .taxonomy-product_cat,
    .wc-block-product .wp-block-post-title,
    .wc-block-components-product-title {
        display: none;
    }
}

@media screen and (min-width: 1024px) {
    .wc-block-product-template__responsive {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}