.works .invisible {
    opacity: 0;
}

.works-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(3 * var(--margin));
    align-items: start;
    /* background:pink; */
}

.works-content a:hover {
    text-decoration: none;
}

.bgColor, .bgImg {
    width: 100vw;  /* fallback for Safari 14 and older browsers */
    width: 100dvw;
    height: 100vh; /* fallback for Safari 14 and older browsers */
    height: 100dvh;
    position:absolute;
    top:0;
    left:0;
    pointer-events: none;
}

.bgColor {
    z-index:-1;
    mix-blend-mode: color;
}

.bgImg {
    z-index:-2;
    background-size: cover;
    background-position: center;
}

.project-thumbnail {
    width:100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
    /* background:red; */
}

.project-thumbnail * {
    /* for js, otherwise multiple children will trigger the mouseover */
    pointer-events: none;
}

.thumbnail {
  aspect-ratio: 1.4;/* all the images are different ratios so this is just a general landscape-oriented compromise*/
  width: 100%;
  position: relative;
  overflow: hidden;
}

.thumbnail img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* MEDIA QUERIES */
@media (max-width: 800px) {
    .works-content {
        grid-template-columns: 1fr;
        gap: var(--margin);
        width:100%;
        /* background:orange; */
    }
    .bgImg {
        display:none;
    }

    /* .invisible doesn't really get added to thumbnails on mobile anyways bc of main.js, but I'm just keeping this for really narrow desktop browsers (nonexistent) :p */
    .works .invisible {
        opacity: 1;
    }
}