.sobre-content {
    display: grid;
    grid-template-columns: max-content max-content max-content;
    justify-items: center;
    align-items: center;
    gap: 35px;
}
.sobre-grid {
    display: grid;
    gap: 40px;
    max-width: 900px;
    justify-items: center;
}
.sobre {
    padding: 70px 10px;
}
.fotos img {
    border-radius: 36px;
}
.pecas {
    display: grid;
    justify-items: center;
    gap: 10px;
}
.pecas p {
    transition: .3s;
}
.pecas img {
    border-radius: 82px 13px 13px 13px;
    transition: .3s;
}
.pecas > h2 {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    max-width: 230px;
    line-height: 1.4rem;
    margin-top: 15px;
}
.pecas:hover img {
    box-shadow: 0px 0px 0px 5px var(--main-cor), 0px 0px 20px 15px var(--sombra)
}

.bg-pecas {
    background: none;
}

@media only screen and (min-width:620px) and (max-width:920px) {

    .sobre-content {
        grid-template-columns: max-content max-content;
        gap: 25px;
    }
    
}

@media only screen and (min-width:0px) and (max-width:619px) {

    .sobre-content {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
}

@media only screen and (max-width:400px) {

    .sobre .title p {
        font-size: 1rem;
    }
    
}

.mapa {
    padding: 40px 10px 80px;
    display: grid;
    gap: 40px;
}
.mapouter {
    width: 100%;
    border-radius: 150px 36px 36px 36px;
}
.mapouter iframe {
    width: 100%;
    border-radius: 150px 36px 36px 36px;
    box-shadow: 0px 0px 15px var(--sombra);
}

.mapa .btn {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: center;
    gap: 5px;
}
.mapa .btn:hover svg path {
    fill: var(--main-cor);
}