.cat-image{
	position: relative;
	display: block;
	span{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		padding: .25rem .5rem;
		background: white;
		color: black;
		font-size: 1.5rem;
		white-space: nowrap;
		&:after{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			border: 5px solid white;
			opacity: 0;
			transition: .3s ease;
		}
        @include media-breakpoint-down(lg){
			font-size: 1rem;
		}
	}
	&:hover{
		span{
			&:after{
				left: -.5rem;
				top: -.5rem;
				width: calc(100% + 1rem);
				height: calc(100% + 1rem);
				opacity: 1;
			}
		}
	}
	img{
		width: 100%;
		height: auto;
        @include media-breakpoint-down(lg){
			height: 150px;
			object-fit: cover;
			object-position: center;
		}
	}
}

.c-link {
    color: #697375;
    font-size: 13px;
    text-align: center;
    width: 100%;
    display: inline-flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    text-decoration: unset;
    vertical-align: top;
    height: 4rem;
    border-left: 1px solid $gray-400;
    position: relative;
    border: 1px solid $gray-400;
    transition: .2s ease;
    &:hover{
	    border-bottom: 5px solid $primary;
    }
}