html {
    overflow: visible;
    /* padding: 0; */
}

header {
    padding: 0 1rem;
    flex-wrap: wrap;
}

.logo {
    display: none;
}

body {
    margin-top: 2rem;
    /* max-width: 100vw; */
    width: 100%;
}

main {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 9rem;
    width: 100%;
    overflow: hidden;
}

.description {
    grid-column: 1 / 3;
    grid-row: 1/2;
    justify-self: center;
}

.description button {
    margin: 0 auto;
    position: relative;
    top: 2rem;
}

.bike {
    grid-column: 1;
    grid-row: 2/3;
}

.bike figure {
    top: 5rem;
}

.characteristics {
    position: inherit;
    grid-column: 1;
    grid-row: 3/4;
    width: 80%;
    justify-self: center;
}

#Img.pedal {
    transform: scale(3)
                translate(-10%, -20%);
}

#Img.timon {
    transform:  scale(3)
                translate(5%, 15%);
}

#Img.asiento {
    transform: scale(4)
                translate(-17%, 20%)
}

#Img.aro {
    transform: scale(2.5)
                translate(20%, -26%)
}



.circle {
    display: none;
}

@media screen and (max-width:619px){
    header {
        justify-content: center;
    }

    .text {
        left: 20%;
    }

    .plus {
        width: 2.5rem;
    }
    #zPedal.plus.active,
    #zTimon.active,
    #zAsiento.active,
    #zAro.active {
        width: 4rem;
    }   
}

@media screen and (max-width:518px){
    .description h2 {
        font-size: 10rem;
    }

    .description h3 {
        font-size: 4rem;
    }

    .description p {
        font-size: 1.6rem;
    }

    .text h4 {
        font-size: 1.5rem;
    }

    .text p {
        font-size: 1.2rem;
    }
}