section {
    &.portfolio {
        i {
            position: absolute;
            font-size: 1.5rem;
            background-color: white;
            z-index: 10;
            padding: 8px;
            bottom: 1rem;
            left: 1rem;
            width: 40px;
            height: 40px;
            &::before {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }
        .image-wrapper {
            position: relative;
            overflow: hidden;
        }
        .image {
            transition: transform 0.3s ease;
            img {
                margin: 0 auto;
                display: block;
                min-width: 100%;
            }
        }
        .filter {
            display: flex;
            flex-wrap: wrap;
            list-style: none;
            margin: 0;
            padding: 0;
            margin-top: 2rem;
            margin-left: -8px;
            margin-right: -8px;
            margin-bottom: 1.5rem;
            li {
                margin: 0 0.5rem;
                margin-bottom: 1rem;
                &.active {
                    a {
                        border-color: $primary;
                        color: $primary;
                    }
                }
            }
            a {
                display: block;
                background-color: white;
                padding: 4px 12px;
                border-radius: 3px;
                border: 2px solid $grey;
                color: inherit;
            }
        }
        .entries {
            position: relative;
            list-style: none;
            margin: 0;
            padding: 0;
            display: block;
            margin-left: -8px;
            margin-right: -8px;
            &::after {
                content: "";
                display: table;
                clear: both;
            }
            a {
                display: block;
                text-decoration: none;
                position: relative;
                overflow: hidden;
                @media (max-width: 768px) {
                    display: inline-block;
                }
                &:hover {
                    .image {
                        transform: scale(1.1);
                    }
                }
            }
            li {
                display: block;
                margin-bottom: 16px;
                padding: 0 8px;
                width: 100%;
                float: left;
                @media (min-width: 768px) {
                    width: 50%;
                    &:nth-child(2n+1) {
                        &::after {
                            content: "";
                            display: table;
                            clear: both;
                        }
                    }
                }
                @media (min-width: 992px) {
                    width: 33.333%;
                    &:nth-child(2n+1) {
                        &::after {
                            content: none;
                        }
                    }
                    &:nth-child(3n+1) {
                        &::after {
                            content: "";
                            display: table;
                            clear: both;
                        }
                    }
                }
                //&.large {
                //    @media (min-width: 1280px) {
                //        width: 64%;
                //        //&:nth-child(2n+1) {
                //        //    &::after {
                //        //        content: none;
                //        //    }
                //        //}
                //        &:nth-child(3n+1) {
                //            &::after {
                //                content: none;
                //            }
                //        }
                //    }
                //}
            }
        }
    }
}

//.portfolio-categories {
//    display: flex;
//    align-items: flex-end;
//    justify-content: flex-end;
//    margin-bottom: 2rem;
//    margin-top: 2rem;
//    label {
//        margin-right: 1rem;
//        vertical-align: top;
//        padding-bottom: 4px;
//    }
//    select {
//        border: 0;
//        font-size: 16px;
//        padding: 4px;
//    }
//}