/**
 * for all devices/viewports
 */
.mspgalleryGrid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}
.mspgalleryGrid img.img-responsive {
    width: 100%;
    display: block;
    height: auto;
}
.mspgalleryGrid>div {
    margin-right: 20px;
    margin-bottom: 20px;
    position: relative;
}
/* image credits */
.mspgalleryCredits {
    z-index: 333;
    max-width: 100%;
    font-size: 0;
    line-height: 1em;
    min-height: 2em;
    position: absolute;
    right: 0;
    padding: 1ex;
    background-color: rgba(255,255,255,0.75);
    color: #000000;
}
.mspgalleryCredits:before {
    content: '©';
    padding: 0.5ex;
    font-size: 8pt;
    line-height: 1.25em;
}
.mspgalleryCredits:hover,
.mspgalleryCredits:focus,
.mspgalleryCredits:active {
    font-size: 8pt;
}
.mspgalleryCredits:hover:before,
.mspgalleryCredits:focus:before,
.mspgalleryCredits:active:before {
    display: none;
}
.mspgalleryCredits a {
    color: #000000;
    text-decoration: underline;
}
/**
 * for smartphones
 */
@media screen and (max-width: 479px) {
    /* 2 and 3 desktop columns: 1 columns on this viewport */
    .mspgalleryGrid.columns2>div,
    .mspgalleryGrid.columns3>div {
        width: 100%;
        margin-right: 0;
    }
    /* 4 desktop columns: 2 columns on this viewport */
    .mspgalleryGrid.columns4>div {
        width: calc((100% / 2) - (20px / 2));
    }
    .mspgalleryGrid.columns4>div:nth-child(2n) {
        margin-right: 0;
    }
}
/**
 * for larger smartphones and smaller tablets
 */
@media screen and (min-width: 480px) and (max-width: 767px) {
    /* 2 desktop columns: 1 column on this viewport */
    .mspgalleryGrid.columns2>div{
        width: 100%;
        margin-right: 0;
    }
    /* 3 desktop columns: 2 columns on this viewport */
    .mspgalleryGrid.columns3>div {
        width: calc((100% / 2) - (20px / 2));
    }
    .mspgalleryGrid.columns3>div:nth-child(2n) {
        margin-right: 0;
    }
    /* 4 desktop columns: 3 columns on this viewport */
    .mspgalleryGrid.columns4>div {
        width: calc((100% / 3) - (40px / 3));
    }
    .mspgalleryGrid.columns4>div:nth-child(3n) {
        margin-right: 0;
    }
}
/**
 * for larger tablets and small desktops or window sizes
 */
@media screen and (min-width: 768px) and (max-width: 991px) {
    /* 2 desktop columns */
    .mspgalleryGrid.columns2>div {
        width: calc((100% / 2) - (20px / 2));
    }
    .mspgalleryGrid.columns2>div:nth-child(2n) {
        margin-right: 0;
    }
    /* 3 and 4 desktop columns: 3 columns on this viewport */
    .mspgalleryGrid.columns3>div,
    .mspgalleryGrid.columns4>div {
        width: calc((100% / 3) - (40px / 3));
    }
    .mspgalleryGrid.columns3>div:nth-child(3n),
    .mspgalleryGrid.columns4>div:nth-child(3n) {
        margin-right: 0;
    }
}
/**
 * for desktops/notebooks and tablets in landscape
 */
@media screen and (min-width: 992px) {
    /* 2 desktop columns */
    .mspgalleryGrid.columns2>div {
        width: calc((100% / 2) - (20px / 2));
    }
    .mspgalleryGrid.columns2>div:nth-child(2n) {
        margin-right: 0;
    }
    /* 3 desktop columns */
    .mspgalleryGrid.columns3>div {
        width: calc((100% / 3) - (40px / 3));
    }
    .mspgalleryGrid.columns3>div:nth-child(3n) {
        margin-right: 0;
    }
    /* 4 desktop columns */
    .mspgalleryGrid.columns4>div {
        width: calc((100% / 4) - (60px / 4));
    }
    .mspgalleryGrid.columns4>div:nth-child(4n) {
        margin-right: 0;
    }
}