#project-list {
    display: flex;
    gap: 1em;
}

.project-item {
    width: 256px;
    border-radius: 8px;
    overflow: clip;
    background-color: var(--primary);
    box-shadow: 4px 4px 0 color-mix(in srgb, var(--background), #0008 50%);
    cursor: pointer;

    .project-item-banner {
        width: 256px;
        height: 128px;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .project-info {
        padding: .4em .5em;

        h3 {
            margin: 0 0 .2em 0;

            a {
                color: var(--on-background);
            }
        }

        p {
            font-size: .8em;
            margin: 0;
        }
    }

    &:hover {
        outline: 1px solid var(--on-primary);
    }
}

#crew-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2em 4em;

    .crew-item {
        width: 10em;
        display: grid;
        grid-template-rows: 8em 4em;
        gap: .5em;
        text-align: center;
        transform: rotate(2deg);

        &:nth-child(even) {
            transform: rotate(-2deg);

            &:hover .crew-avatar img.avatar {
                transform: rotate(-4deg);
            }
        }

        .crew-avatar img.avatar, .crew-info {
            box-shadow: 4px 4px 0 color-mix(in srgb, var(--background), #0008 50%);
        }

        &:hover .crew-avatar img.avatar {
            transform: rotate(2deg);
        }
    }

    .crew-avatar {
        img.avatar {
            width: 8em;
            height: 8em;
            aspect-ratio: 1;
            object-fit: cover;
            border-radius: 8px;
            background-color: var(--primary);
        }
    }
    .crew-item:nth-child(even) .crew-avatar img.avatar {
        transform: rotate(-2deg);
    }

    .crew-info {
        padding: .5em;
        display: flex;
        flex-direction: column;
        background-color: var(--primary);
        border-radius: 8px;

        h3, p {
            margin: 0;
        }

        h3 {
            font-size: 1.5em;
        }

        p {
            font-size: .8em;
        }
    }
    .crew-item:nth-child(odd) .crew-info:before {
        transform: skew(0, 2deg) translate(1.3em, -.2em);
    }
}

@media screen and (max-width: 900px) {
    #crew-list {
        #grid-template-columns: repeat(2, 1fr);
    }
}