/*
Ben MacIntyre
index.css Table of Contents
May 29, 2025

- Work Spotlight
- Individual Card Backgrounds Set
- Responsive grid layout

*/


/* Work Spotlight */
#spotlight {
    max-width: 760px;
    height: fit-content;
    display: grid;
    grid-template-columns: auto auto auto auto;
    justify-items: center;
    margin-bottom: 50px;
    gap: 10px;
}

.project-card {
    width: 100px;
    aspect-ratio: 1/1;
    filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0));
}
.project-card img {
    width: 100%;
    height: 100%;


    background-size: cover;
    object-fit: cover;
    object-position: center;
    border-radius: 20px;
}

.project-card:hover {
     transition: 1s;
     scale: 1.03;
 }



/* Responsive Grid Layout */
@media(max-width: 500px) {
    .project-card {
        width: 100%;
        border-radius: 15px;
    }
    #spotlight {
        grid-template-columns: 23% 23% 23% 23%;


    }

}