/* PROJECTS */
.project__data {
    color: var(--color-white);
    padding: var(--spacing-default);
}

/* LARGE ONLY */
@media (min-width: 64rem) {
    .project {
        position: relative;
        aspect-ratio: 5/7;
    }

    .project>picture>img,
    .project>img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .project__data {
        position: absolute;
        width: 90%;
        left: 5%;
        bottom: 5%;
        z-index: 1;
        background-color: rgba(var(--color-black-rgb), .65);
    }
}

/* END LARGE ONLY */

/* SMALL ONLY */
@media (max-width: 63.9375rem) {
    .project__data {
        background-color: var(--color-black);
    }
}

/* END SMALL ONLY */
/* END PROJECTS */