body {
    background-color : rgb(244, 246, 244);
}

.main-content {
    max-width     : var(--var-content-width);
    margin-inline : auto;
}

.portfolio-grid {
    --min-item-width      : 240px;
    --min-item-height     : 320px;
    --item-padding        : 2rem;

    display               : grid;
    grid-gap              : 2rem;

    grid-template-columns : repeat(auto-fill, minmax(min(var(--min-item-width), 100%), 1fr));

    .portfolio-item {
        position                   : relative;
        background-color           : white;
        border-radius              : 1rem;
        height                     : var(--min-item-height);
        padding                    : var(--item-padding);
        display                    : grid;
        grid-template-rows         : 1fr min-content min-content;
        overflow                   : hidden;
        gap                        : var(--item-padding);

        transition-property        : transform;
        transition-duration        : 250ms;
        transition-timing-function : ease;

        /*outline                    : 1px solid transparent;*/

        .item-image {
            position   : absolute;
            inset      : 0;
            width      : 100%;
            height     : 100%;
            object-fit : cover;
            filter     : brightness(90%);
            z-index    : 0;
        }

        .item-title {
            position    : relative;
            grid-column : 1;
            grid-row    : 2;
            font        : var(--font-portfolio-item-title);
            color       : white;
        }

        .item-type {
            width            : min-content;
            background-color : rgba(0, 0, 0, 0.2);
            backdrop-filter  : blur(4px);
            color            : white;
            padding-inline   : 0.8rem;
            padding-block    : 0.4rem;
            border-radius    : 0.6rem;
            position         : relative;
            grid-column      : 1;
            grid-row         : 3;
            font             : var(--font-portfolio-item-type);
        }
    }

    .portfolio-item:hover {
        transform : scale(1.03);
        /*outline   : 1px solid var(--color-grey-2);*/
    }
}