.grid {
    display: flex;
    flex-wrap: wrap;
    /* gap: 30px; */
    padding: 9vh 0;
    flex-direction: row;
    justify-content: center;
}

.col {
    max-width: clamp(13vh, 15vw, 15vw);
}
body {
    background-color: white;
    background-attachment: fixed;
    height: 100vh;    
}

* {
    box-sizing: border-box;
    margin: 0%;
    
}

img {
    display: block;
    margin: auto;
    width: 100%;
    padding: 0.5vw;   
    transition: 0.2s;
    border-radius: clamp(0.5vh, 0.7vw, 0.7vw);
    
    
    
}

img:hover {
    transform: scale(102%);
filter: drop-shadow(0.3rem 0.3rem 0.5rem rgb(59, 59, 59));}
img:active {
    transform: scale(98%);
    filter: none;
}
span {
    font-size: clamp(0.5vh, 0.5vw, 0.5vw);
    text-align: left;
    font-family: myriad pro;
     position: relative;
         color: black;
     transition: 0.2s;
    left: 1vw;
    bottom: 1vh;
    
}

a {
    text-decoration: none;
}

@font-face {
    font-family: myriad pro;
    src: url(/Myriad\ Pro\ Regular.ttf);
}