:root
{
    --P_Container_Display: grid;
    --P_Container_Sizes: repeat(1fr,3);
    --P_Container_Design: "PIm PIm CCard";
}

/* Product presentation style's */

body
{
    line-height: 30px;
}

.Prod_pre_Container
{
    width: 80%;
    display: var(--P_Container_Display);
    grid-template-columns: var(--P_Container_Sizes);
    grid-template-areas: var(--P_Container_Design);
    margin: 30px auto 50px auto;
    gap: 20px;
}

.Prod_pre_Title
{
    margin-top: 10px;
    font-size: 3rem;
}


.Prod_pre_BoxC
{
    grid-area: CCard;
    margin: auto auto;
}

.Whats_Prod_btn
{
    background:var(--background-btn_Prod);
    color:#fff;
}

.Whats_Prod_btn a
{
    color:#fff;
}
/* For other's product's title */

h2.T_In_Title
{
    font-size: 3rem;
    text-align: center;
}

.ProdPaT
{
    text-align: center;
}

/* Product Slider */
.Slider_Product
{
    grid-area: PIm;
    width: 90%;
    max-width: 500px;
    margin: auto;
    overflow: hidden;
    position: relative;
}
/* Por default son 3 slides */
.slider
{
    display:flex;
    height: 100%;
    width: 300%;
    margin-left: -100%;
}

.slider_2
{
    width:200%;
}

.slider_4 
{
    width: 400%;
}

.slider__section
{
    width: 100%;
}

.slider__img
{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slider__btn
{
    position: absolute;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.7);
    top: 50%;
    transform: translateY(-50%);
    font-size: 30px;
    font-weight: bold;
    font-family: monospace;
    text-align: center;
    border-radius: 50%;
    color:#000; 
    cursor: pointer;
}

.slider__btn:hover
{
    background: #fff;
}


.slider__btn--left
{
    left: 10px
}

.slider__btn--right
{
    right: 10px;
}

/* Simple image */
.simple_image_presentation
{
    grid-area: PIm;
}

.simple_prod_presentation
{
    width: 500px;
    height: 500px;
}


@media(max-width: 768px)
{
    .Prod_pre_Container
    {
        grid-template-columns: auto;
    }

    .simple_prod_presentation
    {
        width: 300px;
        height: 300px;
    }
}

@media(max-width: 500px)
{
    .Prod_pre_Container
    {
        grid-template-columns: 1fr;
        grid-template-areas: "PIm"
                             "CCard";
    }

    .simple_prod_presentation
    {
        width: 280px;
        height: 280px;
    }

    .Prod_pre_Title
    {
        margin-top: 30px;
    }
}