.modal {

    display: block;
    position: fixed;
    width: 0;
    height: 0;
    z-index: -10;
    left: 0;
    top: 0;
    opacity: 0;
    transition: opacity 0.3s linear, width 0.3s linear, height 0.3s linear;

    &:target {

        z-index: 1000;
        width: 100vw;
        height: 100vh;
        opacity: 1;
        padding-top: 0 !important;

        a.modal-background {

            display: block;
            position: absolute;
            width: 100%;
            height: 100%;

            background: $color_background_dark;
        }

        a.modal-link {

            display: block;
            margin: 10rem;

            img {

                position: relative; /* make sure parent z-index is applied */
                max-width: calc(100vw - 20rem);
                max-height: calc(100vh - 20rem);
                width: 100%;
                object-fit: contain;
                background: $color_background_dark;
            }
        }
    }
}
