#arrangements {
    position: relative;
    margin: 0;
    padding: 0;
    display: block;
    width: 100%;
}

#arrangements a {
    text-decoration: none;
    display: block;
}

#arrangements .item {
    position: relative;
    overflow: hidden;
}

#arrangements .item p {
    position: absolute;
    left: 20px;
    bottom: 10px;
    margin: 0;
    padding: 0;
    font-family: "Roboto", sans-serif;
    font-weight: 600;
    font-style: normal;
    color: #fff;
    font-size: 17px;
    text-transform: uppercase;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
}

#arrangements .item.promotions p {
    color: #333;
    text-shadow: none;
}

#arrangements .item.promotions span {
    display: block;
    font-size: 27px;
    color: #5a5a5a;
    font-weight: 500;
    text-transform: none;
    text-shadow: none;
}

#arrangements .dining-room {
    float: left;
    width: 641px;
    margin: 0;
}

#arrangements .hall {
    float: left;
    width: 315px;
    margin: 0 0 0 12px;
}

#arrangements .lighting {
    float: left;
    width: 314px;
    margin: 0 0 0 12px;
}

#arrangements .upholstered-furniture {
    float: right;
    width: 642px;
    margin: 12px 0 0 0;
}

#arrangements .office {
    float: left;
    width: 314px;
    margin: 12px 0 0 0;
}

#arrangements .promotions {
    float: left;
    width: 312px;
    margin: 12px 0 0 12px;
    border: solid #c7c7c7 1px;
}

#arrangements .sleeping-room {
    float: left;
    width: 424px;
    margin: 12px 0 0 0;
    clear: left;
}

#arrangements .child-room {
    float: left;
    width: 424px;
    margin: 12px 0 0 12px;
}

#arrangements .kitchen {
    float: right;
    width: 423px;
    margin: 12px 0 0 0;
}

/* only for X-LARGE */
@media all and (min-width: 1200px) and (max-width: 1399px) {
    #arrangements .item.promotions span {
        font-size: 24px;
    }

    #arrangements .dining-room {
        width: 552px;
    }

    #arrangements .hall,
    #arrangements .office,
    #arrangements .lighting {
        width: 270px;
    }

    #arrangements .upholstered-furniture {
        width: 552px;
    }

    #arrangements .promotions {
        width: 268px;
    }

    #arrangements .sleeping-room,
    #arrangements .child-room {
        width: 365px;
    }

    #arrangements .kitchen {
        width: 364px;
    }
}

/* for LARGE, X-LARGE, XX-LARGE */
@media all and (min-width: 992px) {
    #arrangements .item img {
        transition: .25s;
        max-width: 100%;
    }

    #arrangements .item:hover img {
        transform: scale(1.05);
    }
}

/* only for LARGE */
@media all and (min-width: 992px) and (max-width: 1199px) {
    #arrangements .item.promotions span {
        font-size: 25px;
    }

    #arrangements .dining-room {
        width: 622px;
    }

    #arrangements .hall {
        float: right;
        width: 305px;
        margin: 0;
    }

    #arrangements .lighting {
        float: right;
        width: 305px;
        margin: 9px 0 0 0;
        clear: right;
    }

    #arrangements .upholstered-furniture {
        clear: both;
        float: right;
        width: 622px;
        margin: 10px 0 0 0;
    }

    #arrangements .office {
        float: left;
        width: 305px;
        margin: 10px 0 0 0;
    }

    #arrangements .promotions {
        float: left;
        width: 303px;
        margin: 11px 0 0 0;
        border: solid #e0e0e0 1px;
        height: 179px;
    }

    #arrangements .sleeping-room {
        width: 305px;
        margin: 9px 0 0 0;
    }

    #arrangements .child-room {
        float: left;
        width: 305px;
        margin: 9px 0 0 10px;
    }

    #arrangements .kitchen {
        width: 304px;
        margin: 9px 0 0 0;
    }
}

/* up to MEDIUM */
@media all and (max-width: 991px) {
    #arrangements .item p {
        font-size: 14px;
        bottom: 5px;
        left: 15px;
    }
}

/* only for MEDIUM */
@media all and (min-width: 768px) and (max-width: 991px) {
    #arrangements .item.promotions span {
        font-size: 21px;
    }

    #arrangements .dining-room,
    #arrangements .office,
    #arrangements .sleeping-room {
        width: 224px;
        margin: 0 0 12px 0;
        float: left;
    }

    #arrangements .hall,
    #arrangements .promotions,
    #arrangements .child-room {
        width: 224px;
        margin: 0 0 12px 12px;
        float: left;
    }

    #arrangements .lighting,
    #arrangements .upholstered-furniture,
    #arrangements .kitchen {
        width: 224px;
        margin: 0 0 12px 0;
        float: right;
    }
}

/* for EXTRA SMALL and SMALL */
@media all and (max-width: 767px) {
    #arrangements .item p {
        font-size: 12px;
    }

    #arrangements .dining-room,
    #arrangements .lighting,
    #arrangements .office,
    #arrangements .child-room {
        float: left;
        margin: 0 0 12px 0;
        width: calc(50% - 6px);
        clear: both;
    }

    #arrangements .hall,
    #arrangements .upholstered-furniture,
    #arrangements .sleeping-room,
    #arrangements .kitchen {
        float: right;
        margin: 0 0 12px 0;
        width: calc(50% - 6px);
        clear: none;
    }
}