.barra-ricerca{
    justify-self: center;
    width: 80%;
    display: flex;
    flex-direction: row;
    grid-column-gap: 2rem;

    .input-ricerca{
        height: 3.5rem;
        border-radius: 0.7rem;
        background-color: var(--holzhof-color-light-grey);
        width: 100%;
        border: none;
        padding: 0 1rem 0 1rem;

        &:focus-visible {
            border: 2px solid var(--holzhof-color-light-grey);
        }
    }

    .bottone-ricerca{
        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;
        width: fit-content;

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

.container-ricerca{
    min-height: 35vh;
    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;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        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: 3vh;
	overflow: hidden;

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

        .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{
                margin-top: 3vh;
                margin-bottom: 0;
            }
        }
    }
}
 
@media (max-width: 999px){
	.bottone-ricerca{
	  margin-top:1rem;
	}
	.barra-ricerca{
	 flex-direction:column;
	 align-items:center;
	}
	.input-ricerca{
	 width: 130%  !important;
	 }
}
@media (max-width:500px){
	.container-ricerca{
	grid-template-columns : none;
	}
}