h1 {
    font-size: 1.5rem;
}

#image-parent img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
    width: 100%;
    border-radius: .25em;
}

.vin-data {
    h2 {
        margin-bottom: .35em;
    }

    mark {
        padding: .3em .5em;
        display: block;

    }

    mark + div {
        margin-top: 1em;
    }
}

.grid {
    --grid-color: var(--p-secondary-underline);

    display: grid;
    grid-template-columns: repeat(2, auto);
    border-left: 1px solid var(--grid-color);
    border-top: 1px solid var(--grid-color);
    margin-bottom: 1em;
    overflow-x: auto;

    > div:nth-child(even) {
        font-family: var(--p-font-family-monospace);
        border-right: 1px solid var(--grid-color);
    }
}

.naprava h2 {
    font-size: 1.05rem;
}

.grid {
    [data-url], a {
        text-decoration-line: underline;
        text-decoration-color: #555;
        text-decoration-style: dotted;
        text-decoration-thickness: 1px;

        &:hover {
            text-decoration-color: #333;
            text-decoration-style: solid;
        }
    }

    [data-url] {
        cursor: help;
    }
}

.grid > div {
    padding: .25em .5em;
    border-bottom: 1px solid var(--grid-color);
}

.dalsi-zaznamy {
    overflow-x: auto;
    font-family: var(--p-font-family-monospace);
}


.box {
    display: grid;
    gap: .5em;

    margin-bottom: 1em;

    img {
        max-width: 100px;
    }

    a {
        display: block;
    }
}

@media screen and (min-width: 576px) {
    .box {
        img {
            max-width: 120px;
        }
    }

    .naprava .grid {
        grid-template-columns: repeat(4, auto);
    }
}

@media screen and (min-width: 768px) {
    .box {
        padding: .75em;
        border: 1px solid var(--p-muted-border-color);
        border-radius: var(--p-border-radius);
    }
}

@media screen and (max-width: 767px) {
    h1 {
        font-size: 1.35rem;
    }

    .box {
        grid-template-columns: 1fr 1fr;


        div:nth-child(1) {
            text-align: center;
        }

        .text {
            display: none;
        }

        small {
            grid-column: span 2;
        }
    }
}


i.print {
    --url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M448 192V77.3c0-8.5-3.4-16.6-9.4-22.6L393.4 9.4c-6-6-14.1-9.4-22.6-9.4H96C78.3 0 64 14.3 64 32v160c-35.4 0-64 28.7-64 64v112c0 8.8 7.2 16 16 16h48v96c0 17.7 14.3 32 32 32h320c17.7 0 32-14.3 32-32v-96h48c8.8 0 16-7.2 16-16V256c0-35.4-28.7-64-64-64zm-64 256H128v-96h256v96zm0-224H128V64h192v48c0 8.8 7.2 16 16 16h48v96zm48 72c-13.3 0-24-10.8-24-24 0-13.3 10.8-24 24-24s24 10.7 24 24c0 13.3-10.8 24-24 24z'/%3E%3C/svg%3E");
}

i.share {
    --url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M503.7 189.8L327.7 37.9C312.3 24.5 288 35.3 288 56v80.1C127.4 137.9 0 170.1 0 322.3c0 61.4 39.6 122.3 83.3 154.1 13.7 9.9 33.1-2.5 28.1-18.6C66.1 312.8 132.9 274.3 288 272.1V360c0 20.7 24.3 31.5 39.7 18.2l176-152c11.1-9.6 11.1-26.8 0-36.3z'/%3E%3C/svg%3E");
}