@import 'colorsJM.css';

.DynPagePictureContainer {
    margin-left: 1em;
    margin-right: 1em;
}

.DynPagePicture {
    position: relative;
    display: inline-block; /* or 'block' depending on your layout needs */
    padding: 1.0em; /* space between the picture and the frame */
}

    .DynPagePicture::before {
        content: '';
        position: absolute;
        border: 0.75em solid transparent;
        border-color: var(--border-color) transparent transparent var(--border-color); /* change 'black' to your desired frame color */
        box-sizing: border-box;
    }

    .DynPagePicture::after {
        content: '';
        position: absolute;
        border: 0.75em solid transparent;
        border-color: transparent var(--border-color) var(--border-color) transparent; /* change 'black' to your desired frame color */
        box-sizing: border-box;
    }

    .DynPagePicture::before {
        top: 0;
        left: 0;
        width: 66%;
        height: 33%;
    }

    .DynPagePicture::after {
        bottom: 0;
        right: 0;
        width: 66%;
        height: 33%;
    }

    .DynPagePicture img {
        display: block; /* removes bottom space under image */
        max-width: 100%; /* ensures image does not exceed the container's width */
        height: auto; /* maintains aspect ratio */
    }