.centered-flower {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 6vh;
    margin-bottom: 7vh;
}

.bottom-menu {
    width: 100%;
    display: flex;
    flex-direction: row;
    height: max-content;
    font-style: var(--holzhof-font-style-normal);
    font-weight: var(--holzhof-font-weight-normal);
    font-family: var(--holzhof-font-family-roboto);
    letter-spacing: var(--holzhof-character-spacing-0);
    text-align: left;
    opacity: 1;
    margin-bottom: 80px;

    .hzf-menu{
        position: relative;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(
            auto-fit,
            minmax(calc(100% / 4), 1fr)
        );
        grid-auto-rows: 40px;
        align-items: end;
        padding: 20px;

        .menu-header{
            text-align: left;
            grid-column: 1 / span 4;
            grid-row: 1 / span 2;
            color: var(--holzhof-color-grey);
            font-size: var(--holzhof-font-size-32);
            line-height: var(--holzhof-line-spacing-38);

            span {
                color: var(--holzhof-color-green);
            }
        }
    }
    a {
        padding-left: 20px;
        column-span: 1;
        color: var(--holzhof-color-grey);
        background-image: url("../svg/fiore-pieno.svg");
        background-repeat: no-repeat;
        background-size: 10px;
        background-position: left;
    }
}
.hzf-menu::after{
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--holzhof-color-green);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cline x1='3' y1='97%25' x2='97%25' y2='97%25' stroke='white' stroke-width='1' stroke-dasharray='10 6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cline x1='3' y1='97%25' x2='97%25' y2='97%25' stroke='white' stroke-width='1' stroke-dasharray='10 6'/%3E%3C/svg%3E");
}


.items-categorie {
    display: grid;
    grid-template-columns: 30.3% 30.3% 30.3%;
    grid-column-gap: 3vw;
    grid-row-gap: 6vh;
    grid-auto-rows: 45vh;
    margin-bottom: 7vh;
    
    .item {
        display: flex;
        position: relative;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        height: 100%;
        width: 100%;
        border-radius: 10px;
        padding: 3vh;
	overflow: hidden;

        img {
            /*height: 70%;
            max-width: 100%;
            align-self: center;
            border-radius: 10px;
            object-fit: cover;*/
            flex-grow: 1;
            width: 100%;
            max-width: 100%;
            align-self: center;
            border-radius: 10px;
            object-fit: contain !important;
            overflow: hidden;
        }

        .testi{
            font-style: var(--holzhof-font-style-normal);
            font-weight: var(--holzhof-font-weight-bold);
            font-family: var(--holzhof-font-family-roboto);
            letter-spacing: var(--holzhof-character-spacing-0);
            
            h3 {
                font-size: var(--holzhof-font-size-24);
                line-height: var(--holzhof-line-spacing-38);
                color: var(--holzhof-color-grey);
                text-align: left;
                opacity: 1;
            }

            .product-code {
                padding: 3px 20px 3px 20px;
                border-radius: 27px;
                border: 2px solid var(--holzhof-color-grey);
                height: 3vh;
                background-color: var(--holzhof-color-grey);
                color: var(--holzhof-color-white);
            }
        }
    }

    .item::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background-color: var(--holzhof-color-green);
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='3' width='calc(100%25 - 6px)' height='calc(100%25 - 6px)' fill='none' rx='10' stroke='white' stroke-width='1' stroke-dasharray='10 6'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='3' width='calc(100%25 - 6px)' height='calc(100%25 - 6px)' fill='none' rx='10' stroke='white' stroke-width='1' stroke-dasharray='10 6'/%3E%3C/svg%3E");
    }
}

.center {
    width: 100%;
    display: flex;
    justify-content: center;
}

.bottone-grande {
    font-style: var(--holzhof-font-style-normal);
    font-weight: var(--holzhof-font-weight-bold);
    font-family: var(--holzhof-font-family-roboto);
    letter-spacing: var(--holzhof-character-spacing-0);
    font-size: var(--holzhof-font-size-24);
    line-height: var(--holzhof-line-spacing-38);
    color: var(--holzhof-color-grey);
    background-color: var(--holzhof-color-white);
    text-align: center;
    opacity: 1;
    transition: 0.3s;
    border-radius: 27px;
    border: 1px solid var(--holzhof-color-green);
    padding: 5px 4vw 5px 4vw;
    margin-bottom: 10vh;

    &:hover {
        transition: 0.3s;
        background-color: var(--holzhof-color-green);
        color: var(--holzhof-color-white);
    }
}


/*---------------------------------------------------------
                        VISTA MOBILE
---------------------------------------------------------*/
@media (max-width: 999px){
    /* MENU INFONDO ALLA PAGINA */
    .hzf-menu{
        grid-template-columns: 1fr 1fr !important;

        .menu-header{
            grid-column: 1 / span 2 !important;
        }
    }
}

@media (max-width: 650px){
    /* MENU INFONDO ALLA PAGINA */
    .hzf-menu{
        grid-template-columns: 1fr !important;

        .menu-header{
            grid-column: 1 !important;
        }
    }
}

@media (max-width: 799px){
    /* RIQUADRI DELLE PAGINE CATEGORIA */
    .items-categorie{
        grid-template-columns: 1fr !important;
        grid-auto-rows: auto;

        .item{
            min-height: 45vh;
        }
    }
}

@media (min-width: 800px) and (max-width: 1200px){
    /* RIQUADRI DELLE PAGINE CATEGORIA */
    .items-categorie{
        grid-template-columns: 1fr 1fr !important;
        grid-auto-rows: auto;

        .item{
            min-height: 45vh;
        }
    }
}