@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css');

$black: hsl(0,8%,5%);
$yellow: hsl(60,100%,60%);
$gray: hsl(0,0%,50%);
$bg_gray: hsl(0,0%,83%);
$white: hsl(0,0%,100%);

:root{
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
}

h1{
    font-size: 36px;
}

h2{
    font-size: 30px;
}

h3{
    font-size: 24px;
}

h4{
    font-size: 18px;
}

a{
    font-size: 14px;
    color: inherit;
    font-family: inherit;
    text-decoration: none;
}

body{
    background-color: $bg_gray;
}

*:has(>.container){
    display: flex;
    justify-content: center;
}

.container{
    width: min(1200px, 90%);
}

header{
    $header-height: 3.5rem;
    width: 100%;

    .brand{
        background-color: $black;
        height: $header-height;

        .container{
            display: flex;
            justify-content: center;
            align-items: center;

            img{
                height: 70%;
            }
        }
        
    }

    .navbar{
        background-color: $yellow;
        height: $header-height;

        nav{
            height: 100%;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            ul{
                display: flex;
                gap: 2rem;
            }
        }
    }
}

main{

    section.hero{

        img{
            width: 100%;
        }
    }

    section.bikes{
        background-color: $white;

        article.bike-grid{
            width: 100%;
            display: grid;
            place-items: center;
            gap: 2rem 4rem;
            grid-template-columns: repeat(auto-fit, minmax(min(250px, 90%), 1fr));
            margin: 3rem 0rem;

            .bike{
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                gap: 1rem;
                text-align: center;
                width: 100%;

                img{
                    width: 90%;
                }
            }
        }
    }

    section.infomation{
        padding: 1rem 0rem;

        .container{
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
            place-items: center;

            article.info{
                width: 100%;

                .video{

                    img{
                        width: 100%;
                    }
                }
            }

            article.paragrafs{
                display: flex;
                flex-direction: column;
                height: 100%;
                justify-content: space-between;
                
                .paragraf{
                    display: flex;
                    flex-direction: column;
                    gap: 0.5rem;

                    h4{
                        font-weight: 500;
                    }
                    p{
                        font-weight: 300;
                    }
                }
            }
        }
    }
}

footer{
    background-color: $black;
    padding: 1rem 0rem;

    .grid{
        display: flex;
        justify-content: space-around;
        text-align: center;
        color: $gray;

        .item{
            display: flex;
            flex-direction: column;
            gap: 0.3rem;

            .yellow{
                font-size: 14px;
                margin-bottom: 0.4rem;
                color: $yellow;
            }
        }
    }
}