/* CSS Document */
.odkazy-blok{
    max-width:1320px;
    margin:30px auto;
    padding:20px;
    box-sizing:border-box;

    border:1px solid #d0d0d0;
    background:#fff;
    border-radius:12px;

    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:20px;
}

.odkaz{
    display:block;
    text-decoration:none;
    color:#000;
    text-align:center;

    border:1px solid #e5e5e5;
    border-radius:8px;
    padding:10px;
    background:#fff;
    box-sizing:border-box;
    transition:box-shadow 0.2s ease, transform 0.2s ease;
}

.odkaz:hover{
    box-shadow:0 2px 8px rgba(0,0,0,0.12);
    transform:translateY(2px);
}

/* hlavicka se hne pri najedzu kurzoru dolu o 2 mm*/
.hlavicka{
    display:block;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hlavicka img{
    display:block;
    width:100%;
    height:auto;
    box-shadow:0 3px 8px rgba(0,0,0,0.15);  /* malé stíny */
}

.hlavicka:hover{
    transform:translateY(2mm);
}

.hlavicka:hover img{
    box-shadow:0 6px 14px rgba(0,0,0,0.25); /* silnější stín při hover */
}


.odkaz img{
    display:block;
    width:100%;
    height:160px;
    object-fit:cover;
    border-radius:6px;
}

.odkaz .text{
    margin-top:10px;
    font-size:15px;
    line-height:1.35;
}

/* tablet */
@media (max-width: 1000px){
    .odkazy-blok{
        grid-template-columns:repeat(3, 1fr);
    }
}

/* menší tablet */
@media (max-width: 760px){
    .odkazy-blok{
        grid-template-columns:repeat(2, 1fr);
    }

    .odkaz img{
        height:140px;
    }
}

/* mobil */
@media (max-width: 480px){
    .odkazy-blok{
        grid-template-columns:1fr;
        padding:15px;
        gap:15px;
    }

    .odkaz img{
        height:auto;
    }
}