/* ------------------------- Product Details Page CSS - START ------------------------- */
.hero-grid{
    display:grid;
    grid-template-areas: "heading" "para" "image" "buttons" "pills";
}
.area-heading{ grid-area:heading; }
.area-para{ grid-area:para; }
.area-image{ grid-area:image; }
.area-buttons{ grid-area:buttons; }
.area-pills{ grid-area:pills; }
.white-btn-border{
    background: transparent;
    color: var(--white-color);
    border: 1px solid var(--white-color);
}
.hero-pill{
    display:inline-flex;
    color: var(--white-color);
    font-weight: 500;
    padding: 10px;
    border: 1px solid var(--white-color-10);
    background: var(--white-color-10);
    border-radius: 8px;
}
/* ------------------------- Product Details Page CSS - END ------------------------- */

/* ------------------------- Product Details Page Media CSS - START ------------------------- */

@media (min-width:992px){
    .hero-grid{
        grid-template-columns: 4fr 3fr;
        grid-template-areas:
            "heading image"
            "para    image"
            "buttons image"
            "pills   image";
    }
    .area-image .ratio{ --bs-aspect-ratio: auto; height:100%; }
    .area-image{ grid-row: 1 / span 4; }
}

/* ------------------------- Product Details Page Media CSS - END ------------------------- */