/* Base */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: ALEXANDRIA, sans-serif;
    color: #6D3130;
}

.container {
    width: min(1100px, 90%);
    text-align: center;
    margin: auto;
}

h1 {
    margin: 0.1rem;
    font-size: 2rem;
}
h3,h4 {
    margin: 0rem;
    font-size: 1.3rem;
}

/* Griglia 3x3 */
.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px; /* più spazio tra le righe */
    margin: auto;
}

/* Cella immagine quadrata */
.member {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; /* mantiene quadrato */
    overflow: hidden;
    border-radius: 8px;
    background: #F7F3EA;
    margin: 0;
}

    .member a {
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
    }

    .member img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.4s ease;
    }

    .member a::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
        opacity: 0;
        transition: opacity 0.4s ease;
    }

    .member:hover img {
        transform: scale(1.05);
    }

    .member:hover a::after {
        opacity: 1;
    }

/* Testo sotto le immagini */
.caption {
    margin-top: 10px;
    font-size: 0.8rem;
    color: #6D3130;
    text-align: center;
    line-height: 1.4;
}
.caption table{
    width: 100%;
}

    .caption tr {
        background-color:#F7F3EA;
    }
    .caption tr:nth-child(2n+1){
        filter:brightness(0.95);
    }
    .caption td:nth-child(1){
        text-align: left;
    }
    .caption td:nth-child(2) {
        text-align: right;
        width: 6rem;
    }
    .caption table{
        margin-bottom: 1rem
    }
        /* Responsività */
        @media (max-width: 900px) {
            .grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 600px) {
            .grid {
                grid-template-columns: 1fr;
            }

            h1 {
                font-size: 2.5rem;
            }
        }