.ikona {
    float: right;
    padding: 0 0 10px 10px;
}

.clear {
    clear: both;
}

.text_center {
    text-align: center;
}

img.top {
    vertical-align: text-top;
}

img.bottom {
    vertical-align: text-bottom;
}

img.middle {
    vertical-align: middle;
}


.mrizka {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 10px;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
}

.mrizka div {
    display: flex;
    align-items: center;
}

.mrizka div.uprostred {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mrizka div a img {
    vertical-align: middle;
    padding: 0 10px;
}


div.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-gap: 10px;
}

dialog.lightbox {
    background-color: #333;
    color: #eee;
    border: 1px solid #eee;
    padding: 0;
    max-width: 90vw;
    max-height: 90vh;
}

dialog.lightbox img {
    max-width: 100%;
    max-height: calc(90vh - 25px);
    display: block;
}

dialog.lightbox .close {
    position: absolute;
    right: 1ex;
    top: 1ex;
    cursor: pointer;
}

dialog.lightbox footer {
    height: 25px;
    line-height: 25px;
    font-size: 16px;
    text-align: center;
}

dialog.lightbox footer .prev {
    float: left;
    cursor: pointer;
    margin-left: 1ex;
}

dialog.lightbox footer .next {
    float: right;
    cursor: pointer;
    margin-right: 1ex;
}

dialog.lightbox::backdrop {
    background-color: rgba(#000, 0.5);
    backdrop-filter: blur(5px);
}