@media (max-width: 640px) {
    main {
        max-width: 375px;
    }
    /*HEADER*/
    header {
        max-width: 360px;
        place-self: initial;
        margin-top: 10px;
    }
    .logo {
        font-size: 1rem;
        margin-top: 0.5rem;
        margin-left: 1rem;
    }
    .logo::after {
        font-size: 1rem;
    }
    .estrela {
        display: none;
    }
    .menu {
        display: none;
    }
    .mini-menu {
        width: 10px;
        display: none;
    }
    /*HOME*/
    .home {
        height: 110vh;
        max-width: 360px;
        display: flex;
        grid-template-columns: none;
        align-items: center;
        transform: translateX(-0%);
    }
    .foto-circulo {
        width: 250px;
    }
    .foto-gato-circulo {
        width: 250px;
        height: 350px;
        display: grid;
        grid-area: img;
        padding-left: 0px;
        margin-left: 0px;
        transform: translate(25%, -50%)
    }
    span.titulo-guia-de-raças {
        font-size: 2rem;
    }
    .titulo-guia-de-raças::after {
        font-size: 2rem;
    }
    .texts {
        text-align: center;
        align-items: center;
        width: 300px;
        transform: translate(-8%, -10%);
    }
    .text {
        font-size: 1rem;
        padding: 10px;
        width: 300px;
        transform: none;
    }
    .comece-aqui {
        width: 200px;
        height: 30px;
        transform: translate(40%, 450%);
    }
    /*CONDIÇÃO FISICA*/
    .condicao-fisica {
        display: grid;
        width: 100%;
        height: 230vh;
        max-width: 360px;
        align-items: center;
        transform: translateX(-0px);
    }
    span.titles-2 {
        font-size: 2rem;
        margin-left: 0rem;
        margin-top: 1rem;
        text-align: center;
        transform: translateX(0px);
    }
    .text-2 {
        font-size: 1rem;
        display: grid;
        width: 300px;
        margin-left: 0rem;
        margin-top: 0rem;
        text-align: center;
        margin-left: 25px;
        transform: translate(15px,-40px);
        padding: 0px;
    }
    .foto-gato-deitado {
        margin-left: 30px;
        margin-top: 10px;
        width: 300px;
        height: 165px;
        transform: translate(0%, 0%);
    }
    .foto-deitado {
        width: 300px;
    }
    .container {
        display: grid;
        align-self: center;
        width: 100%;
        height: 850px;
        transform: translateX(0px);
    }
    .simbolos-bola {
        width: 200px;
    }
    .escrita {
        font-size: 1.5rem;
        text-align: center;
        display: flex;
        width: 150px;
        transform: translate(15%);
    }
    /*DESTAQUES*/
    .destaques {
        height: 135vh;
        max-width: 360px;
    }
    .titles-4 {
        font-size: 2rem;
        margin-top: 0px;
    }
    .text-4 {
        font-size: 1rem;
        width: 300px;
        margin-left: 8px;
        margin-top: 10px;
        transform: translateX(0%);
    }
    .linha-1 {
        display: none;
    }
    .linha-2 {
        display: none;
    }
    .botao-4 {
        width: 200px;
        height: 30px;
        font-size: 1.2rem;
        margin-left: 4rem;
        margin-top: 2rem;
    }
    .botao-4:hover {
        color: #fff;
        cursor: pointer;
        width: 300px;
        margin-left: 1rem;
    }
    .oculto {
        font-size: 1rem;
        width: 300px;
        margin-left: 8px;
        display: grid;
        text-align: center;
    }
    /*PERSONALIDADE*/
    .personalidade {
        width: 100%;
        height: 110vh;
        max-width: 360px;
        display: grid;
    }
    .titles-5 {
        font-size: 2rem;
        display: grid;
        margin-top: 40px;
        transform: translateX(10px);
        width: 360px;
        height: 100px;
    }
    .titles-5::after {
        content: " Siamesa";
    }
    .linha-3 {
        display: none;
    }
    .depoisImg {
        width: 300px;
        transform: translate(-330px, 130px);
    }
    .text-5 {
        font-size: 1rem;
        width: 300px;
        height: auto;
        margin-top: 10px;
        margin-left: 0rem;
        transform: translate(0%, 0%);
        text-align: center;
    }
    .text-6 {
        margin-top: 10px;
        font-size: 1rem;
        width: 300px;
        height: auto;
        margin-left: 0rem;
        transform: translate(0%, 0%);
        text-align: center;
    }
    .foto-gato-em-pé {
        align-items: center;
        grid-area: img;
        width: 150px;
        transform: translate(-245px, 70px);
    }
    .gatoEmPe {
        width: 150px;
    }
    /*CARACTERISTICAS*/
    .caracteristicas {
        height: 125vh;
        width: 100%;
        max-width: 360px;
        display: grid;
        align-items: center;
        grid-template-areas: "title" "img" "text";
    }
    .titles-caracteristicas {
        font-size: 2rem;
        font-family: 'Fredoka One', cursive;
        color: black;
        text-align: center;
        display: grid;
        margin-top: 10px;
        grid-area: title;
        z-index: 3;
    }
    .foto-ultimo-gato {
        grid-area: img;
        margin-left: .3rem;
        margin-top: 5px;
    }
    .gatito {
        width: 350px;
        transform: translateY(-20px);
    }
    .text-caracteristicas {
        margin-top: 10px;
    }
    .textos-todos {
        font-size: 1rem;
        width: 300px;
        height: auto;
        grid-area: text;
        text-align: center;
        transform: translate(30px, -40px);
    }
    .linha-antes {
        display: none;
    }
    .linha-depois {
        display: none;
    }
    /*CONTATOS*/
    .contatos {
        background-color: var(--primary-color);
        display: grid;
        height: 30vh;
        width: 100%;
    }
    
    .logo2 {
        font-size: 1rem;
        margin-top: 1rem;
        margin-left: 1rem;
    }
    
    .logo2::after {
        font-size: 1rem;
    }
    
    .contatos-div {
        display: grid;
        align-self: center;
        text-align: center;
        grid-template-columns: 0.5fr 0.5fr 0.5fr;
        width: 100%;
        align-items: center;
        transform: translateY(0px);
    }
    
    .social-container {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    
    .social {
        font-size: 1.3rem;
        
    }
    
    .social:hover {
        color: black;
    }
    
    .contato-title {
        font-size: 1rem;
    }
    
    .contato-title:hover {
        font-size: 1rem;
        color: white;
    }
    
    .contato-item {
        font-size: 1rem;
    }
}