/* Container defines size. Component adapts. */
.ripple-host {
    position: relative;
    width: 100%;
    height: 100%; /* parent controls actual height */
    background: transparent;
}

/* Square, fluid canvas */
.ripple-canvas {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1; /* keep perfect square */
    display: block;
    background: transparent;
    padding:22px;
}