.mainBody a{
    color: rgba(128,44,140, 1);
    text-decoration: none;
}

.mainBody a:hover{
    /*color: rgba(186, 255, 33, 255);*/
    color: rgba(130,230,222,255);
}

.uuteam{
    display: grid;
    grid-template-columns: repeat(3, 1fr); /*defines the layout of the columns in grid.*/
    gap: 20px;
    margin-top: 50px;
    margin-bottom: 50px;
}

.uuimg{
    width: 100%;
    aspect-ratio: 4 / 5;
    display: block;
}

.uuimgcont{ /*for caption*/
    position: relative;
    overflow: hidden;
}

.caption{ /*place caption/hover text over images*/
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    color: white;
    font-family: Verdana, Tahoma, Arimo, sans-serif;

    font-size: 1.5rem;
    background-color: rgba(128,44,140, 0.4);
    transition: 0.3s;
    opacity: 0; /*make it invisible*/

}

.caption:hover{ /*visible when hover*/
    opacity: 1;
    cursor: default;

}

/* responsive styles */

@media screen and (max-width: 800px){
    .uuteam{
        grid-template-columns: repeat(2, 1fr);
        gap: 4vw;
    }
}