ripple-box {

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    position: relative;
    overflow: hidden;

    & > * {
        grid-row: 1;
        grid-column: 1;
        max-width: inherit;
        min-width: inherit;
        height: inherit;
        max-height: inherit;
        min-height: inherit;
        overflow: hidden;
        place-self: stretch;
        z-index: 1;
    }

    & img {
        object-fit: cover;
    }

    & animated-box {
        background-color: var(--ripple-color, currentColor);
        border-radius: 50%;
        opacity: 0;
        justify-self: end;
        position: absolute;
        width: 100%;
        height: 0;
        padding-bottom: 100%;
        pointer-events: none;
        right: 0;
        bottom: 0;
        z-index: 2;
    }

}