/* about mobile */

@media only screen and (max-width: 970px) {

    #images {
        margin-top: 20px;
    }

    #images div div {
        border: none;
    }

    #images #first-paragraph,
    #images #second-paragraph,
    #images #third-paragraph {
        display: inline-block;
        padding: 0 5%;
        height: auto;
    }

    #images #image-1,
    #images #first-paragraph {
        height: 130px;
        margin-bottom: 5px;
    }

    #images #image-1{
        width: 20%;
    }

    #images #first-paragraph {
        width: 80%;
    }

    #images #image-2 {
        width: 100%;
        height: 500px;
        margin-bottom: 3px;
    }

    #images #image-3 {
        border-right: 3px solid white;
    }

    #images #image-3,
    #images #image-4 {
        width: 50%;
    }

    /* second paragraph */

    #images #second-paragraph {
        width: 100%;
    }

    #images #image-5 {
        width: 100%;
        height: 500px;
    }

    /* third paragraph */

    #images #third-paragraph {
        width: 100%;
    }

    #images #image-6 {
        width: 100%;
        height: 500px;
    }

    /* hide red text area */

    #images #text-content {
        display: none;
    }

}

@media only screen and (max-width: 550px) {

    /* make first paragraph a little smaller */

    .serif-content {
        font-size: 15px;
    }

    #images #image-1,
    #images #first-paragraph {
        height: 150px;
        margin-bottom: 5px;
    }

    #images #image-1{
        width: 25%;
    }

    #images #first-paragraph {
        width: 75%;
    }

    #images #first-paragraph p {
        margin: 0;
    }

    #images #first-paragraph,
    #images #second-paragraph,
    #images #third-paragraph {
        padding: 0 20px 0 20px;
    }

}

@media only screen and (max-width: 400px) {

    .serif-content {
        font-size: 14px;
    }

}