ul.sp-pagebuilder-page-templates {
    list-style: none;
    padding: 0;
    margin: 0 20px 20px;

    > li {
        width: 25%;
        display: inline-block;
        vertical-align: top;

        > a {
            display: block;
            margin: 10px;
            color: #888;
            font-size: 14px;
            font-weight: 500;
            text-decoration: none;
            text-align: center;
            .transition(~'color 400ms');

            &:hover,
            &:active,
            &:focus {
                color: @major_color;

                > div {

                    > span {
                        opacity: 1;
                        .transition(~'opacity 500ms');
                    }

                    > img {
                        opacity: .3;   
                    }
                }
            }

            > div {
                position: relative;
                margin-bottom: 10px;
                background: #000;

                > span {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    -webkit-transform: translate(-50%, -50%);
                    transform: translate(-50%, -50%);
                    opacity: 0;
                    -webkit-transition: opacity 500ms;
                    transition: opacity 500ms;
                }

                > img {
                    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
                    margin: 0;
                    opacity: 1;
                    -webkit-transition: opacity 400ms;
                    transition: opacity 400ms;
                }
            }
        }
    }
}