:root {
    --kompetenzz_orange: rgb(255,102,0);
    --kompetenzz_bordergray: rgb(220,220,220);
    --kompetenzz_bggray: rgb(247,249,249);
}

@font-face {
    font-display:fallback;
    font-family: "TheSansCd";
    src: url(../fonts/TheSansCd_Light.woff) format("woff"), url(../fonts/TheSansCd_Light.eot);
    font-weight: 400
}

@font-face {
    font-display:fallback;
    font-family: "TheSansCd";
    src: url(../fonts/TheSansCd_Bold.woff) format("woff"), url(../fonts/TheSansCd_Bold.eot);
    font-weight: 700
}


/* Fonts */

h1, .footer h3, .last_products_viewed .block-title,
.page-layout-1column .page-title-wrapper h1.page-title  {
    text-transform: uppercase;
    font-weight: 400;
    text-align: center;
    letter-spacing: 4px;
    color: rgb(50,50,50);
    display: block;
}


/* CMS-Home  Startseite */


    .cms-home .column.main > div[data-content-type="html"] {
        display: grid;
        grid-template-columns: repeat(4,1fr)  ;
        gap: 2rem;
        align-items: stretch;
    }

    div.cat_img {
        position: relative;
        box-sizing: border-box;
        text-align: center;
        text-decoration: none;
        color: #333333;
        min-height: 216px;
        > a {   
            display: block;
            width: 100%;
            >img {
                width: 100%;
                height: auto;
                display: block;
            }
            
        }   

        .cat_text {
            position: absolute;
            bottom: 0;
            left: 0;
            background-color: rgba(255, 255, 255, 0.75);
            width: 100%;
            padding-bottom: 10px;
            padding-top: 10px;
            text-transform: uppercase;
            text-decoration: none;
            color: #333333;
        }
        &:hover .cat_text {
            color: rgba(255,255,255,0.75);
            background-color: var(--kompetenzz_orange);
        }
    }
    div.cat_img {
        img{
           display: block;
        }
        img + img {
           display: none;
        }
    }
    div.cat_img:hover {
        img {
           display: none;
        }
        img + img {
           display: block;
        }
    }


@media (max-width: 1200px) {
    .cms-home .column.main > div[data-content-type="html"] {
        grid-template-columns: repeat(2, minmax(288px, 1fr));
    }
}

@media (max-width: 700px) {
    .cms-home .column.main > div[data-content-type="html"] {
        grid-template-columns: 1fr;
    }
}