:root{
    --imagehover-item-width:200px;
    --imagehover-gap:1rem;
    --imagehover-module-padding:4vw;
    --imagehover-content-maxwidth:100%;
    --imagehover-content-margin:inherit;
}
.mod-imagehover {
    background-size: cover;
    max-width: 100%;
    padding: var(--imagehover-module-padding);

    .mod-imagehover__content {
        width:fit-content;
        max-width:var(--imagehover-content-maxwidth);
        margin:var(--imagehover-content-margin);
        text-wrap:balance;

    }
    .mod-imagehover__images {
        display:grid;
        grid-template-columns:repeat(auto-fill,minmax(var(--imagehover-item-width),1fr));
        gap:var(--imagehover-gap);
    }
    .mod-imagehover__item {
        display:grid;

        a, .images-no-link {
            grid-area:1 / 1 / 2 / 2;
            display:grid;
            object-fit:cover;
            place-content:center;
            img {
                width:100%;
                grid-area:1 / 1 / 2 / 2;
                &.mod-imagehover-hover-img {
                    opacity:0;
                }
                &.mod-imagehover-default-img {
                    opacity:1;
                }
            }
        }
        &:hover {
            a, .images-no-link {
                img {
                    &.mod-imagehover-hover-img {
                        opacity:1;
                    }
                    &.mod-imagehover-default-img {
                        opacity:0;
                    }
                }
            }
        }

    }
}