:root {
    --content-width: 400px;
    --content-height:400px;
    --projects-top-spacer-height:calc(calc(100vh -  var(--content-height)) / 2) ;
}
.project-div{
    background-color: transparent;
    --content-width: 400px;
    --content-height:400px;
    --image-width:300px;
    --image-height:300px;
    
    height: calc(calc(100vh - var(--projects-top-spacer-height)) + 50px);
    display:flex;
    justify-content: first baseline;
    flex-direction: column;
    will-change: transform, opacity;
    
}

.project-div img {
    width:var(--image-width);
    height: var(--image-height);
    display: block;
    image-resolution: 100dpi;
    object-fit: cover;
    will-change: transform, opacity;
}

.project-div .horizontal-center .vertical-center .horizontal-center {
    width: 100%;
    height:100%;
}
.project-lower-content {
    display: block;
    width:var(--content-width);
    height: calc(var(--content-height) - var(--image-height));
    font-family: var(--secondary-font-family);
    font-size: 30px;
    text-align: center;
}


@media (max-width: 600px) {
    .project-div {
        --content-width: 100%; /* Set the content width to 100% on smaller screens */
        --image-height: 300px;  /* Reduce image height for smaller screens */
        --div-height: auto;  /* Allow div height to adjust */
    }

    .project-lower-content {
        font-size: 24px; /* Adjust font size for smaller screens */
    }
}

a {
    color: black;
}