.project{
    width:30vw;
    max-width: 400px;
    min-width: 300px;
    /* min-width: 300px; */
}

.project-category{
    width: 100%;
    text-align: center;
    font-size: 2em;
}

.project .image-container img{
    width:80%;
    height: 80%;
}

.image-link{
    width: 30vw;
    max-width: 300px;
    min-width: 200px;
    height: 30vw;
    max-height: 300px;
    min-height: 200px;
    display: grid;
    place-items: center;
    margin:0 auto;
    position: relative;
    filter: grayscale(30%);
    opacity: .8;
}

.image-link:hover , .image-link:focus{
    filter: grayscale(0%);
    opacity: 1;
}

.image-link .frame{
    /* background-image: linear-gradient(to top red black); */
    width:80%;
    height:80%;
    display: block;
    
}
.image-link .inner{
    /* background: blue; */
    position: absolute;
    left:20px;
    right:20px;
    top:20px;
    bottom:20px;
   
}
.image-link .frame .moon{
    width:5vw;
    max-width: 50px;
    height: 5vw;
    max-height: 50px;
}

.iframe-link{
    position: absolute;
    top:0;
    left:0;
    right: 0;
    bottom: 0;
}

/* 
.image-link iframe {
    
    -webkit-transform: scale(.5);
    transform: scale(.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
} */