.host {
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    color: var(--color-gray);
}

.host h4, h3 {
    color: var(--color-blue);
    font-weight: initial;
    font-size: 4rem;
}

.host h4 {
    font-size: 2rem;
}

.host-container-host {
    padding: 2rem 0;
    width: 100%;
    
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}



.host-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    align-items: flex-start;
    padding: 50px;
    width: 90%;
    gap: 40px;

    
}


#host-container h3 {
    font-size: clamp(3rem, 4vw, 9rem);

}

.host-preview {

    flex: 1 0 50px;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: center;

    text-align: left;
    gap: 20px;


}

.host-preview-img {
    justify-self: flex-start;
    width: 20vh;
    height: 20vh;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    

    box-shadow: 10px 10px 20px rgba(0, 0, 0, .25);
    overflow: hidden;
    
}



.host-preview-img img {
    object-fit: cover;
}


.host-preview-img img:hover {
    cursor: pointer;
}

/* Tela de detalhes das host */

.host-details-container {
    padding-top: 2vw;

    position: absolute;
    z-index: 20000;

    display: none;
    justify-content: center;
    align-items: center;

    width: 100vw;
    height: 500vh;
    background-color: rgba(2, 2, 2, 0.8) ;
}


.host-details {
    display: flex;
    flex-direction: column;

    max-width: 60vw;
    min-height: 60vh;
    max-height: 85vh;
    
    position: absolute;
    z-index: 21000;
    border-radius: 20px;
    /* aspect-ratio: 2/2; */

    background-color: white;
    box-shadow: 10px 10px 50px rgba(0, 0, 0, .5);

    overflow: hidden;
}

.host-img {
    object-fit: cover;

    width: 100%;
    height: 50vh;

}


.host-details div {
    display: flex;
    flex-flow: row wrap;
    /* align-items: start; */
    height: 100%;

}


.host-info-container {
    flex: 1 5 20rem;

    padding: 1vw 2vw;
    color: gray;
    display: flex;
    flex-direction: column;
    width: 70%;
    height: 60%;

    font-size: clamp(.9rem, .9vw, 3rem);

}



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

.host-info-sociais a, .host-info-sociais a:visited  {
    color: black;
    display: inline;

}

.host-info-sociais i:hover {
    transform: scale(1.3);
    color: black;

}

.host-info-container h3{
    color: var(--color-blue);
    font-size: clamp(2rem, 2vw, 3rem);
}

.host-maps {
    flex: 1 3 5rem;

    overflow: hidden;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 0;
    max-height: 20%;
    min-width: 250px;
    flex: 1 3 5rem;
    overflow: hidden;

}








/* laws */

.laws {
    padding: 10vw 10vw;
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    color: var(--color-white);
    font-size: clamp(1rem, .5vw, 4rem);

}

.laws h3 {
    color: white;
    font-size: clamp(2rem, 2vw, 6rem);
}