.portfolio-collection-grid {
    padding-left: 50px;
    padding-right: 50px;
    display: grid;
    width: 100%;
    height: 100%;
    #background-image: linear-gradient(#ffffff, #eeffff, #ddffff);
    color: black;
    grid-template-areas:
            "col-1 col-2 col-3"
            "col-4 col-5 col-6"
            "col-7 col-8 col-9";
    #grid-template-columns: 30% 30% 30%;
    #grid-template-rows: 10% 30% 30% 30%;
    column-gap: 50px;
    row-gap: 3em;
    justify-content: space-evenly;
    align-content: space-evenly;
    overflow-y: auto;
    margin-top: 6em;
}

@media (max-width: 576px) {
    .portfolio-collection-grid {
        padding-left: 50px;
        padding-right: 50px;
        display: grid;
        width: 100%;
        height: 100%;
        #background-image: linear-gradient(#ffffff, #eeffff, #ddffff);
        color: black;
        grid-template-areas:
            "col-1"
            "col-2"
            "col-3"
            "col-4"
            "col-5"
            "col-6";
        column-gap: 50px;
        row-gap: 4em;
        justify-content: space-evenly;
        align-content: space-evenly;
        overflow-y: auto;
        margin-top: 6em;
    }
}

@media (min-width: 576px) and (max-width: 768px) {
    .portfolio-collection-grid {
        padding-left: 50px;
        padding-right: 50px;
        display: grid;
        width: 100%;
        height: 100%;
        #background-image: linear-gradient(#ffffff, #eeffff, #ddffff);
        color: black;
        grid-template-areas:
            "col-1 col-2"
            "col-3 col-4"
            "col-5 col-6";
        column-gap: 50px;
        row-gap: 4em;
        justify-content: space-evenly;
        align-content: space-evenly;
        overflow-y: auto;
        margin-top: 6em;
    }
}


.portfolio-collection-card-size {
    height: 220px;
}

.portfolio-collection-item-0 {
    grid-area: col-1;
}

.portfolio-collection-item-1 {
    grid-area: col-2;
}

.portfolio-collection-item-2 {
    grid-area: col-3;
}

.portfolio-collection-item-3 {
    grid-area: col-4;
}

.portfolio-collection-item-4 {
    grid-area: col-5;
}

.portfolio-collection-item-5 {
    grid-area: col-6;
}

.portfolio-non-decorated-link {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    text-decoration: none;
    display: inline;
}

.portfolio-collection-item-base {
    position: relative;
}

.portfolio-collection-item-base-grid {
    display: grid;
    height: 100%;
    row-gap: 1em;
    grid-template-areas: "header"
                         "stack"
                         "summary";
    grid-template-rows: 10% 10% 70%; /* Drei Reihen mit festen Höhen */

    /*grid-template-rows: 25% 10% 45%;*/
    /*grid-template-columns: 100%;*/
    box-shadow: 5px 5px 10px gray;
    padding-left: 1.5em;
    padding-top: 1em;
    padding-right: .75em;
    padding-bottom: .5em;
}

.portfolio-collection-item-title-grid {
    display: grid;
    grid-row: 1;
    grid-column: 1;
    grid-template-columns: 90% 10%;
    grid-template-rows: 100%;
}

.portfolio-collection-item-title {
    display: flex;
    background-color: transparent;
    font-size: 14px;
    font-weight: bold;
    align-items: center;
    grid-area: header;
    margin-top: 1.5em;
}

.portfolio-collection-item-title-icon {
    display: flex;
    background-color: transparent;
    font-size: 14px;
    padding: 1em 1em;
    justify-content: right;
}

.portfolio-title-logo-img {
    height: 2em;
    /*width: 10em;*/
    object-fit: contain;
}

.portfolio-collection-item-summary {
    text-overflow: ellipsis;
    max-height: calc(1em * 10);
    overflow: hidden;
    font-size: 12px;
}

.portfolio-collection-item-skills {
    display: grid;
    grid-template-rows: 20% 80%;
    grid-template-columns: 100%;
    column-gap: .1em;
    /*row-gap: .5em;*/
}

.portfolio-collection-item-stack-icon {
    grid-area: stack;
}

.stack-icon-img {
    /*max-height: 2em;*/
    width: 2em;
}