@sizeXXS: ~"only screen and (max-width: 384px)";
@sizeXS: ~"only screen and (max-width: 575.9px)";
@sizeSM: ~"only screen and (min-width: 576px) and (max-width: 767.9px)";
@sizeMD: ~"only screen and (min-width: 768px) and (max-width: 991.9px)";
@sizeLG: ~"only screen and (min-width: 992px) and (max-width: 1199.9px)";
@sizeXL: ~"only screen and (min-width: 1200px) and (max-width: 1400px)";
@sizeXXL: ~"only screen and (min-width: 1400px)";

@sizeMobile: ~"only screen and (max-width: 1199.9px)";
@sizeDesktop: ~"only screen and (min-width: 1200px)";
@boxShadowDefault: 3px 3px 6px fade(black,8%);

@brand-primary: #00b881;
@brand-secondary: #25403c;
@gray-base: #000;
@text-color: @brand-secondary;

@gray-lightest: lighten(@gray-base, 96%); // #f5f5f5
@grid-gutter-width: 40px;

.transition(@property: all) {
    transition: @property 0.15s linear;
}


.cardlist {
    .item {
    }

    .item-link {
        display: flex;
        background-color: white;
        box-shadow: @boxShadowDefault;
        height: 100%;
        color: @text-color;
        flex-direction: column;

        .img-container {
            position: relative;
            overflow: hidden;
            background-color: fade(@brand-primary,20%);
            .transition;
            flex: 0 0 auto;

            &:after {
                content: "";
                display: block;
                padding-top: 65%;
            }

            &:before {
                content: "";
                height: 60%;
                width: 60%;
                background-image: url(/custom/images/placeholder.svg);
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center;
                display: block;
                position: absolute;
                opacity: 0.5;
                top: 50%;
                left: 50%;
                .transition;
                transform: translate(-50%,-50%);
            }

            img {
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                width: 100%;
                object-fit: cover;
                object-position: center;
                .transition;
            }
        }

        .txt-container {
            padding: @grid-gutter-width / 2;
            flex: 0 1 100%;
        }

        .btn-container {
            padding: @grid-gutter-width / 2;
            padding-top: 0;
            text-align: right;
        }

        &:hover, &:active, &:focus {
            .img-container {
                img {
                    transform: scale(1.05);
                }

                &:before {
                    transform: translate(-50%,-50%) scale(1.1);
                }
            }
        }
    }
}