@media (max-width: 550px){

    :hover {
        transform: unset;
    }

    html {
        scrollbar-width: unset;
        scroll-behavior: smooth;
        scroll-snap-type: initial;
    }

    /* BARRA AZUL */

    #nav-bar {
        padding: 3vw 3vw;
        padding-right: 5vw;
        gap: 0px;
        z-index: 5;
       

    }
    
    .logo-container {
        display: grid;
        justify-content: center;
        align-items: center;
        width: 60%;

    }
    
    .logo {
        width: 20%;
        min-width: 10rem;
        object-fit: cover;
    }
    
    .social-media {
        display: flex;
        gap: 10px;
        color: var(--color-white);
    }

    /* PRIMEIRA TELA */

    .cover-text {

        width: 70%;
 
    
    
    }
    
    .cover-text h1 {
        font-size: 2.5rem;
        font-weight: normal;
    
    
    }
    
    .cover-text p {
        font-size: 1rem;
        font-weight: 400;
        width: auto;
    }


    /* info */

    .info {

        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 10vw;
    
        padding: 20px;
    }

    .info-text {
        width: 100%;
        display: flex;
        flex-flow: column wrap;
        font-size: .8rem;
        font-weight: 400;
    }
    
    .info-text h2 {
        font-size: 2rem;
        font-weight: normal;
    }
    
    .info-text-img {
        width: 250px;
    }
    
    .info-text-img img{
        width: 100%;
        object-fit: cover;
    }
    

    /* detalhes da galeria e hospedagem */

    .host-details-container, .gallery-details-container{
        padding-top: 0;
    }

    .gallery-details, .host-details {
        margin-top: 0;
        position: relative;
        width: 95%;
        min-width: 80%;
        margin-top: 70px;
        z-index: 1000;

        /* max-height: 60vh; */
    }


    .host-img {
       
        max-height: 200px;
    }
        
    .details-info-container h3 {

        font-size: 36px;
        font-size: clamp(1.5rem, 4vw, 4rem);
    }

    .host-info-container, .details-info-container {
        
        display: flex;
        flex-direction: column;
        padding: 20px;

    }

    .host-info-container{
        padding: 10px;
    }
    

    .gallery-details p, .host-details p{
        font-size: 12px;
        
        
    }



    .details-maps, .host-maps {

        max-height: 150px;
        width: 50%;
        max-width: 100%;

      
        
    }

    /* galeria e hospedagem */

    .gallery-container, .host-container {

        grid-template-columns: repeat(auto-fit, minmax(110px, 45vw));
      
        grid-gap: 2px;
    }

    .host-container {

        justify-content: center;
        width: 100%;
        padding: 20px;
        gap: 2vw;
        font-size: 1rem;
    }

    .host-preview {
        display: flex;
        height: 100%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;

    }

    .host-info-sociais {
        display: flex;
        padding: 20px 0px;
        gap: 10px;
      
    }

    .host-preview-img {
        
        width: 18vh;
        height: 18vh;

    }

     .host-preview h4 {
        height: fit-content;
        line-height: 1.9rem;

    }






    /* event */


    .event-container {
        padding: 20px;
        margin: 200px 0;
        width: 100vw;

    }

    .event-container div > img {
        width: 100%;
        object-fit: fill;
        border-radius: 0px;
        z-index: -1;
    }

    .img-principal {
        margin-bottom: 0;
        border-radius: 0px;
    }

    .event-slide-ball {
        bottom: 30px;
    }
    /*  */
}