:root {
    --grid-view-min-width: 10em;
    --grid-view-max-width: 1fr;
}

@media (min-width: 40em) {
    :root {
        --grid-view-min-width: 12.5em;
    }
}

.project-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.project-card img {
    align-self: start;
    max-width: 100%;
    border-radius: var(--border-radius-content);
}

:root:not(.light) .project-image-light {
    display: none;
}

:root:not(.dark) .project-image-dark {
    display: none;
}

.project-card .project-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.project-card .project-title {
    font-size: var(--font-size-md);
    line-height: 1.2;
    overflow-wrap: break-word;
}

.project-card .button {
    align-self: start;
    padding:
        var(--spacing-sm)
        var(--spacing-xl);
}

@media (min-width: 40em) {
    .project-card .project-title {
        font-size: var(--font-size-lg);
    }

    .project-card .button {
        align-self: stretch;
    }
}

/* Skeleton */
.skeleton-card .skeleton-image {
    width: 100%;
    max-width: 22.5em;
}

.skeleton-card .skeleton-button {
    width: 7.5em;
}

@media (min-width: 40em) {
    .skeleton-card .skeleton-button {
        width: auto;
    }
}