#prodotti_container {
    gap: calc((100% - (18% * 5)) / 4);
}

.prodotto-container {
    width: 18%;
    box-sizing: border-box;
    padding-block: 16px;
    cursor: pointer;
}

.prodotto-container img {
    width: 100%;
    aspect-ratio: 1 / 1;
    margin-bottom: 12px;
}

.prodotto-container h5 {
    font-size: 100%;
    font-weight: bold;
    margin-block: 0;
}

.prodotto-container h6 {
    font-size: 80%;
    margin-bottom: 0;
    display: inline;
}

.prodotto-container small {
    font-size: 80%;
}

.prodotto-container a {
    font-size: 80%;
    display: block;
    color: black;
    font-weight: bold;
}

.prodotto-container p {
    font-size: 11pt;
    text-align: justify;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.prodotto-container hr {
    margin-block: 6px;
}

#modalImage {
    width: 100%;
    aspect-ratio: 1 / 1;
}

.modal a {
    color: black;
}

@media screen and (max-width: 1024px) {
    #prodotti_container {
        gap: calc((100% - (48% * 2)));
    }

    .prodotto-container {
        width: 48%;
        box-sizing: border-box;
        padding: 24px;
    }

    .prodotto-container h5 {
        font-size: 2rem;
    }

    .prodotto-container h6,
    .prodotto-container small,
    .prodotto-container a {
        font-size: 1.6rem;
    }

    .prodotto-container p {
        font-size: 1.5rem;
    }

    .modal-dialog {
        max-width: 96% !important;
    }

    #modalTitle {
        font-size: 3rem !important;
    }

    .btn-close {
        width: 4rem !important;
        height: 4rem !important;
        background: transparent var(--bs-btn-close-bg) center / 2em auto no-repeat;;
    }

    .modal strong,
    .modal span,
    .modal a {
        font-size: 2rem !important;
    }

    .modal-content {
        padding: 24px;
    }
}