project-grid.scss

@use 'styles/mixins.scss' as mx;
@use 'styles/settings.scss' as s;
@use 'styles/functions.scss' as fn;

.project-grid {
    display: grid;
    grid-auto-rows: max-content;
    grid-auto-flow: row;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;

    @include mx.breakpoint(medium) {
        grid-template-columns: repeat(4, 1fr);
        gap: 30px;
    }

    .add-project {
        font-size: 64px;
        font-weight: s.$weight-semi-bold;
        cursor: pointer;

        a {
            color: s.$text;
        }
    }

    .project {
        width: 100%;
        padding-bottom: 100%;

        &.large {
            grid-row: span 2;
            height: 100%;
        }
    }
}