span.img-with-caption {
    display: table;
    margin: 0 auto
}

span.img-caption {
    float: left;
    text-align: center;
    width: 50%;
}

/*
/*.container {
/*    position: relative;
/*    max-width: auto;
/*    /* Maximum width */
/*    margin: 5 auto;
/*    /* Center it */
/*}
/*
/*.container .content {
/*    position: absolute;
/*    /* Position the background text */
/*    top: 200px;
/*    left: 200px;
/*    bottom: 0;
/*    /* At the bottom. Use top:0 to append it to the top */
/*    background: rgb(0, 0, 0);
/*    /* Fallback color */
/*    background: rgba(0, 0, 0, 0.5);
/*    /* Black background with 0.5 opacity */
/*    color: #f1f1f1;
/*    /* Grey text */
/*    width: 50%;
/*    /* Full width */
/*    /*padding: 40px; /* Some padding */
/*    /*padding-left: 10%;*/
/*    padding-inline: 5% 10%;
/*    writing-mode: horizontal-tb;
/*}*/

.container2 {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    flex: 1 100%;
    background-color:lavender;
    padding: 1%;
    padding-inline: 5% 10%;
    border: 2px;
    align-items: left;
    align-content: center;
    text-align: left;
    column-width: auto;
    font-size: auto;
    text-size-adjust: 15%;
}

.wrapper {
    display: flex;
    float: left;
    flex-flow: row;
    flex-wrap: nowrap;
    align-items: stretch;
}

/* We tell all items to be 100% width, via flex-basis */
.wrapper>* {
    flex: 1 100%;
}

/* We rely on source order for mobile-first approach
   * in this case:
   * 1. header
   * 2. article
   * 3. aside 1
   * 4. aside 2
   * 5. footer
   */

/* Medium screens */
@media all and (min-width: 600px) {

    /* We tell both sidebars to share a row */
    .aside {
        flex: 1 auto;
    }
}

/* Large screens */
@media all and (min-width: 800px) {

    /* We invert order of first sidebar and main
     * And tell the main element to take twice as much width as the other two sidebars 
     */
    .main {
        flex: 3 0px;
    }

    .aside-1 {
        order: 1;
    }

    .main {
        order: 2;
    }

    .aside-2 {
        order: 3;
    }

    .footer {
        order: 4;
    }
}

/* Large screens */
@media all and (min-width: 800px) {

    /* We invert order of first sidebar and main
     * And tell the main element to take twice as much width as the other two sidebars 
     */
    .main {
        flex: 3 0px;
    }

    .aside-1 {
        order: 1;
    }

    .main {
        order: 2;
    }

    .aside-2 {
        order: 3;
    }

    .footer {
        order: 4;
    }
}