@layer components {
    .modal {
        pointer-events: none;
        visibility: hidden;
        width: 100%;
        max-width: none;
        height: 100%;
        max-height: none;
        color: inherit;
        transition: visibility .3s allow-discrete, background-color .3s ease-out, opacity .1s ease-out;
        overscroll-behavior: contain;
        z-index: 9999;
        scrollbar-gutter: auto;
        background-color: #0000;
        place-items: center;
        margin: 0;
        padding: 0;
        display: grid;
        position: fixed;
        inset: 0;
        overflow: clip;
    }

    :is(.modal.modal-open,.modal[open],.modal:target,.modal-toggle:checked+.modal) .modal-box {
        opacity: 1;
        translate: 0;
        scale: 1;
    }

    .modal.modal-open, .modal[open], .modal:target, .modal-toggle:checked + .modal {
        pointer-events: auto;
        visibility: visible;
        opacity: 1;
        transition: visibility 0s allow-discrete, background-color .3s ease-out, opacity .1s ease-out;
        background-color: #0006;
    }

    .modal-box {
        --modal-padding: 24px;
        background-color: var(--bg-neutral-primary);
        border-radius: 4px;
        opacity: 0;
        overscroll-behavior: contain;
        grid-row-start: 1;
        grid-column-start: 1;
        width: 91.6667%;
        max-width: 750px;
        max-height: 100vh;

        transition: translate .3s ease-out, scale .3s ease-out, opacity .2s ease-out 50ms, box-shadow .3s ease-out;
        overflow-y: auto;
        scale: 95%;
        box-shadow: 0 25px 50px -12px #00000040;

        display: flex;
        flex-direction: column;
    }

    .modal-picture {
        width: 100%;
        aspect-ratio: 3/2;
        height: 50%;
    }

    .modal-picture:has(i.icon) {
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: center;
        min-height: stretch;

        i {
            font-size: 10vw;
        }
    }

    .modal-picture:has(img) {
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
    }

    @media (min-width: 768px) {
        .modal-box {
            --modal-padding: 32px;
            flex-direction: row;
        }

        .modal-picture {
            height: 100%;
            aspect-ratio: 4/5;
        }
    }

    .modal-content {
        width: 100%;
        height: 50%;
        padding: var(--modal-padding);
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .modal-title {
        margin-block-start: 0;
        padding-inline-end: 24px;
    }

    .modal-close {
        position: absolute;
        top: var(--modal-padding);
        right: var(--modal-padding);
        z-index: 10;
        padding: 2px;
        align-items: center;

        background-color: var(--bg-neutral-primary);
        border-radius: 4px;
        border: 0;

        &:before {
            font-family: var(--font-material-icon-outlined);
            font-size: 24px;
            content: "\e5cd";
        }
    }
}