body{
    background-color: var(--primary-background-color);
}

.main-prdct{
    padding: 0 1rem 0 1rem;
    background-color: var(--primary-background-color);

    h1{
        font-weight: 500;
        font-size: var(--font-size-subject);
        text-wrap-style: pretty;
    }
    p{
        text-wrap-style: pretty;

        span{
            font-weight: 600;
        }
    }

    .article-statistics-prdct{
        display: flex;
        align-items:center ;
        border: 1px solid var(--user-chat-background-color);
        border-radius: 10rem;
        background-color: var(--secondary-background-color);
        height: 3rem;
        width: fit-content;
        padding-right: 0.3rem;

        img{
            height: 3rem;
        }
    }

    .product-img-bici{
        width: 100%;
    }

    h2{
        display: flex;
        justify-content:center ;
        align-items: center;
        background-color: var(--secondary-background-color);
        border-radius: 1.5rem 1.5rem 0 0;
        margin: .5em 0 0 0;
    }

    #shop-online{
        padding: 0;
        margin-top: 8px;

        li{
            background-color: var(--secondary-background-color);
            color: var(--user-chat-background-color);
            margin: .5rem 0 .5rem 0;
            height: 2.5rem;
            width: auto;
            list-style: none;
            text-decoration: none;
            text-align: center;
        }

        li:first-child{
            border-radius: 1.5rem 1.5rem 0 0;
        }

        li:last-child{
            border-radius: 0 0 1.5rem 1.5rem;
        }
    }

    #shop-offline{
        padding: 0;
        margin-top: 8px;

        li{
            background-color: var(--secondary-background-color);
            margin: .5rem 0 .5rem 0;
            height: 2.5rem;
            width: auto;
            list-style: none;
            text-decoration: none;
            text-align: center;
        }

        li:first-child{
            border-radius: 1.5rem 1.5rem 0 0;
        }

        li:last-child{
            border-radius: 0 0 1.5rem 1.5rem;
        }

        p{
            margin: 0;
            font-size: var(--font-size-text);
            font-weight: 600;
        }
    }

    .h2{
        font-size: var(--font-size-subject);
        font-weight: var(--font-weight-text);
        text-align: start;
    }
    iframe{
        width: 100%;
        height: 100%;
        border: 1px solid var(--secondary-background-color);
        border-radius: 1.5rem;
    }

    .why-know{
        display: grid;
        grid-template-columns: 1fr 4fr;
        grid-template-rows: 1fr 1fr;
        align-items: center;
        background-color: var(--secondary-background-color);
        border-radius: 1.5rem;

        p{
            margin: 0;
        }
    }

    #full-description{
        background-color: var(--secondary-background-color);
        border-radius: 1.5rem;
        padding: 1em;
    }

    @media (min-width:1024px){
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr 2fr 2fr 2fr 2fr 3fr 3fr 5fr 8fr;
        height: 85em;
        column-gap: 3em;

        .add-to-list-prdct{
            grid-column: 2;
            grid-row: 6;
            align-self: center;
        }

        h1{
            grid-column: 2;
            grid-row: 1;
            margin: 0;
        }

        p:first-of-type{
            grid-column: 2;
            grid-row: 2;
            margin: 0;
        }

        .article-statistics-prdct{
            grid-column: 2;
            grid-row: 7;
            align-self: center;
        }

        p:nth-of-type(2){
            grid-column: 2;
            grid-row: 3;
        }

        .product-img-bici{
            grid-column: 1;
            grid-row-start: 1;
            grid-row-end: 8;
        }

        #shop-online{
            grid-column: 2;
            grid-row:4 ;
            display: grid;
            margin: 0;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: repeat(1fr);

            p{
                grid-column-start:1;
                grid-column-end: 3;
                grid-row: 1;
                text-align: center;
            }

            li{
                border-radius: .2em;
            }

            li:first-child{
                border-radius: .2em;
            }

            li:last-child{
                border-radius: .2em;
            }
        }

        #shop-offline{
            grid-column: 2;
            grid-row: 5;
            display: grid;
            margin: 0;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: repeat(1fr);

            p{
                grid-column-start:1;
                grid-column-end: 3;
                grid-row: 1;
                text-align: center;
            }

            li{
                border-radius: .2em;
            }

            li:first-child{
                border-radius: .2em;
            }

            li:last-child{
                border-radius: .2em;
            }
        
        }

        .h2, iframe{
            grid-column: 2;
            grid-row-start: 10;
        }

        .why-know{
            grid-column: 1;
            grid-row-start: 8;
            grid-row-end: 10;
        }

        #full-description{
            grid-column: 2;
            grid-row-start: 8;
            grid-row-end: 10;
            margin: 0;
        }
    }

    
}