.col_projects_wrapper:not(:has(.collection_full)) {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
    padding-top: var(--p-m);
    
    .col_projects {
        flex: 1 1 calc(25% - (60px / 4));
        padding: 0px;
        @media (max-width: 992px) {
            flex: 1 1 calc(50% - (60px / 2));
        }
        @media (max-width: 576px) {
            flex: 1 1 100%;
        }
        .collection_container {
            position: relative;
            aspect-ratio: 9 / 12;
            display: flex;
            flex-direction: column;
            justify-content: end;
            align-items: flex-end;
            .col_projects__title {
                font-size: var(--fs-500);
                color: var(--fc-light);
                z-index: 1;
                position: relative;
                padding: 10px;
                display: flex;
                align-items: center;
                transition: max-height 300ms ease;
                gap: 8px;
                &::after {
                    content: "";
                    width: 36px;
                    height: 1px;
                    background-color: var(--clr-primary-light);
                }
            }
            .col_projects_teaser {
                position: relative;
                z-index: 1;
                overflow: hidden;
                max-height: 0;
                transition: max-height 300ms ease;
                color: var(--fc-light);
                padding: 0px 36px 0px 30px;
                font-size: var(--fs-400);
            }

            &:hover {
                .col_projects_teaser {
                    max-height: 100px; 
                    padding: 0px 36px 16px 30px;
                    transition: max-height 300ms ease;
                }
                .col_projects__title { 
                    padding-bottom: 0px;
                    transition: max-height 300ms ease;
                }
            }
            .col_projects_preview_img {
                position: absolute;
                width: 100%;
                height: 100%;
                z-index: 0;
                &::after {
                    content: "";
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    top: 0px;
                    left: 0px;
                    background: var(--gr-dark);
                    z-index: 2;
                }
            }
        }
    }
}