.grid-cataloghi{
    width: 100%;
    height: max-content;
    display: grid;
    grid-template-columns: 22.5% 22.5% 22.5% 22.5%;
    grid-auto-rows: auto;
    grid-column-gap: 3.3%;
    row-gap: 1rem;

    .catalogo{
        display: grid;
        grid-template-rows: 75% auto;
        align-items: center;
        height: 100%;
        width: 100%;
        background-image: repeating-linear-gradient(90deg, var(--holzhof-color-green), var(--holzhof-color-green) 3px, transparent 3px, transparent 11px), repeating-linear-gradient(180deg, var(--holzhof-color-green), var(--holzhof-color-green) 3px, transparent 3px, transparent 11px), repeating-linear-gradient(90deg, var(--holzhof-color-green), var(--holzhof-color-green) 3px, transparent 3px, transparent 11px), repeating-linear-gradient(180deg, var(--holzhof-color-green), var(--holzhof-color-green) 3px, transparent 3px, transparent 11px);
        background-position: left top, right top, left bottom, left top;
        background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
        background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
        border-radius: 10px;
        padding: 2rem 2rem 1rem 2rem;

        img{
            width: 100%;
            height: 100%;
            align-self: center;
            border-radius: 10px;
            object-fit: cover;
            overflow: hidden;
        }

        a {
            font-size: var(--holzhof-font-size-24);
            line-height: var(--holzhof-line-spacing-38);
            color: var(--holzhof-color-grey);
            text-align: left;
            opacity: 1;
            margin-bottom: 0;
            margin-top: 1rem;
        }
    }
}
@media (max-width: 1199px) {
    .grid-cataloghi{
        grid-template-columns: auto auto;
    }
}
@media (max-width: 500px) {
    .grid-cataloghi{
        grid-template-columns: auto;
    }
    .markdown{
        h2{
            font-size:1.2rem !important;
        }
    }
}