.content-grid-content {
 
    .items { 
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
 
        &:not(:first-child) { 
            padding-top: 2rem; 
        } 
        
        .item-image {
            height: 120px;
            @include break(from-desktop) {
            height: 200px;
                
            }
        }

        &.items-2 {
        	.item {
        		width: calc(100% / 2);
        		padding: .5em;
        	}
        }
        &.items-3 {
        	.item {
                padding: .5em;
                width: 50%;
                @include break(from-desktop) {
        		  width: calc(100% / 3);
                }
        	}
        }
        &.items-4 {
        	.item {
                padding: .5em;
                width: 50%;
                @include break(from-desktop) {
        		  width: calc(100% / 4);
                }
        	}
        }

        &.items-5 {
        	.item {
                padding: .5em;
                width: 50%;
                @include break(from-desktop) {
        		  width: calc(100% / 5);
                }
        	}
            .item-image {
                height: 120px;
            }
        }

        &.items-6 {
        	.item {
                padding: .5em;
                width: 50%;
                @include break(from-desktop) {
            		width: calc(100% / 6);
                }
        	}
            .item-image {
                height: 120px;
            }
        }   
    } 
 
    .item { 
        text-align: center;
        color: $black !important;

        &:hover {
            text-decoration: none;

            .description {
                opacity: 1;
            }

            .label {
                background-color: $lightgreen;
            }

            .item-image .image {
                transform: scale3d(1.1,1.1,1);
            }
        }
    } 
 
    .item-image { 
        position: relative;
        overflow: hidden;
        margin: 0;

        .image {
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center center;
            transition: all 0.3s ease-in-out;
        }

    } 
 
    .label {
        padding: .5em;
        font-weight: 400; 
        @include font-size(16px)
        background-color: white;
        transition: all 0.3s ease-in-out;
        color: white;
        background-color: $blue;
        @include break(from-desktop) {
            padding: 1em;
            @include font-size(20px)
            
        }
    } 

    .description {
        opacity: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        padding: 2em;
        background-color: fade-out($black, .2);
        color: white;
        transition: all 0.3s ease-in-out;
        display: flex;
        align-items: center;
        @include font-size(12);

        @include break(from-desktop) {
        @include font-size(16);            
        }
    }
} 