.foto-container {
    --gap: 20px;
    --num-cols: 3;
    --row-height: 350px;

    box-sizing: border-box;
    padding: var(--gap);

    display: grid;
    grid-template-columns: repeat(var(--num-cols), 1fr);
    grid-auto-rows: var(--row-height);
    gap: var(--gap);
}

.spieltags-titel {
    margin-top: 10px;
}

.spieltags-fotos > img{
    width: 350px;
    height: 350px;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.5s ease, filter 0.5s ease;
}

.spieltags-fotos > img:hover {
    transform: scale(1.1);
    filter:brightness(75%);
}

@media screen and (max-width: 1370px){
    .foto-container {
        --num-cols: 2;
    }
}

@media screen and (max-width: 950px){
    .foto-container {
        --num-cols: 1;
        --gap: 40px;
    }

    .spieltags-titel {
        font-size: 20px;
    }


    .spieltags-fotos > img {
        width: 300px;
        height: 300px;
    }
}