﻿article {
    border-bottom: 0px;
    overflow: unset;

}

article h2 {
    margin-bottom: 0.2em;
}

article h3 {
    margin-bottom: 0.4em;
}

article.layout picture {
    width: unset;
    width: 300px;
    height: unset;
    float: unset;
    background-color: unset;
    margin: 0px;
}

article.layout picture.sizeL {
    width: unset;
    height: unset;
}

article.layout picture img {
    width: 100%;
    height: auto;
    margin: 0px;
}

article.layout picture.noEdge {
    border: 0px solid red;
}

article.layout picture.edgeLeftTop {
    border: 0px solid blue;
    margin-top: 30px;
}

article.layout picture.edgeLeftTop figure {
    margin-left: 30px;
    width: 270px;
    position: relative;
    z-index: 0;
}

article.layout picture.edgeLeftTop figure::before {
    content: '';
    background-color: #d60039;
    width: 100px;
    height: 100px;
    position: absolute;
    top: -30px;
    left: -30px;
    z-index: -1;
}

article.layout picture.edgeRightBottom {
    border: 0px solid green;
    margin-bottom: 30px;
}

article.layout picture.edgeRightBottom figure {
    width: 270px;
    position: relative;
    z-index: 0;
}

article.layout picture.edgeRightBottom figure::before {
    content: '';
    background-color: #d60039;
    width: 100px;
    height: 100px;
    position: absolute;
    bottom: -30px;
    right: -30px;
    z-index: -1;
}

article.layout picture.edgeRightBottom figure figcaption {
    display: none;
}

article.layout.imageRIGHTFloat picture {
    float: right;
    margin-left: 1em;
}

article.layout.imageLEFTFloat picture {
    float: left;
    margin-right: 1em;
}

@media (max-width: 900px) {
    article.layout.imageLEFTFloat picture, article.layout.imageRIGHTFloat picture {
        float: unset;
        margin: 0px;
    }

    article.layout.imageLEFTFloat picture figure, article.layout.imageRIGHTFloat picture figure {
        margin-bottom: 1em;
    }
}

article.layout.imageRIGHTGrid .container, article.layout.imageLEFTGrid .container {
    display: flex;
    gap: 1em;
}

@media (max-width: 900px) {
    article.layout.imageRIGHTGrid .container, article.layout.imageLEFTGrid .container {
        flex-direction: column;
    }
}

article.layout.imageRIGHTGrid .container .content, article.layout.imageLEFTGrid .container .content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

article.layout.imageRIGHTGrid .container p, article.layout.imageLEFTGrid .container p {
    flex: 1;
}

article.layout.imageRIGHTGrid .container picture, article.layout.imageLEFTGrid .container picture {
    /*flex: 1;*/
    width: 300px;
}

article .layout.imageTOP {
}

article.layout.imageLEFT picture {
    width: 50%;
    float: left;
    margin-right: 1em;
}

article.layout.imageRIGHT picture {
    width: 50%;
    float: right;
    margin-left: 1em;
}

@media (max-width: 900px) {
    p {
        order: 2;
    }

    picture {
        order: 1;
        margin-left: 30px;
    }
}

article.layout ul {
    /*padding-left: 30px;*/
}

article.layout li {
    /*padding-left: 20px;*/
    margin-left: 1em;
    list-style-type: disc;
}