.framed-img {
    --framed-img-image-size: 4cm;

    position: relative;
    display: inline-block;
    width: var(--framed-img-image-size);
    height: var(--framed-img-image-size);
    overflow: hidden;
    border: 1px solid var(--palette-secondary-main);
    border-radius: var(--border-radius);
    text-align: center;
    white-space: nowrap;
    box-sizing: border-box;
    flex-grow: 0;
    flex-shrink: 0;
    text-align: center;

    background-color: transparent;
    background-repeat: repeat;
    background-position: center center;
    background-image: url('../gfx-2020/style/image-preview-background.svg');
    background-size: 40px 40px;
}
    .framed-img a {
        display: inline-block;
        vertical-align: middle;
        line-height: 0;
    }
    .framed-img img {
        display: none;
        display: inline-block;
        max-width: 100%;
        max-height: 100%;
        vertical-align: middle;
    }
.framed-img-layer {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
    .framed-img-layer::before {
        display: inline-block;
        content: '';
        width: 0px;
        height: 100%;
        vertical-align: middle;
    }