.shrinky-box > * {
    z-index: 2;
    position: relative;
}
.shrinky-box {
    --shrinky-border: 2px;
    --shrinky-length: 1em;
    --shrinky-color: currentcolor;
    --shrinky-background-color: var(--bs-dark);
    --shrinky-outline-factor: .75;
    display: inline-block;
    position: relative;
    border: var(--shrinky-border) solid var(--shrinky-color);
    z-index: 0;
    transition: all 0.3s ease;
    opacity: 1;
}
.shrinky-box:hover {
    z-index: 10;
}
.shrinky-box:before, .shrinky-box:after {
    content: "";
    display: block;
    position: absolute;
    background: var(--shrinky-background-color);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-iteration-count: 1;
    transform-origin: 50% 50%;
    opacity: 1;
}
.shrinky-box:before {
    /* +1 just to be safe */
    width: calc(100% + var(--shrinky-border) * 2 + 2px);
    height: calc(100% + var(--shrinky-border) * 2);
    z-index: 1;
    transition: height 1s ease, opacity 0.8s ease;
}
.shrinky-box:after {
    /* +1 just to be safe */
    height: calc(100% + var(--shrinky-border) * 2 + 2px);
    width: calc(100% + var(--shrinky-border) * 2);

    z-index: 1;
    transition: width 1s ease, opacity 0.8s ease;
}
.shrinky-box:hover:before, .shrinky-box:focus:before {
    transition: height 0.2s ease, opacity 0.3s ease;
    height: calc(100% - var(--shrinky-length));
    opacity: var(--shrinky-outline-factor);
}
.shrinky-box:hover:after, .shrinky-box:focus:after {
    transition: width 0.2s ease, opacity 0.3s ease;
    width: calc(100% - var(--shrinky-length));
    opacity: var(--shrinky-outline-factor);
}
.shrinky-box__image {
    fill: var(--shrinky-background-color);
    width: 60%;
    will-change: width;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    transition: all 0.5s ease;
    z-index: 2;
}