﻿

#instafeed {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

    #instafeed a {
        position: relative;
        width: Calc(100% / 4 - (30px / 4 * 3));
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
    }

    #instafeed.imagesPerRow3 {
        gap: 30px;
    }

        #instafeed.imagesPerRow3 a {
            width: Calc(100% / 3 - (30px / 3 * 2));
        }

    #instafeed.imagesPerRow4 {
        gap: 30px;
    }

        #instafeed.imagesPerRow4 a {
            width: Calc(100% / 4 - (30px / 4 * 3));
        }

    #instafeed.imagesPerRow5 {
        gap: 15px;
    }

        #instafeed.imagesPerRow5 a {
            width: Calc(100% / 5 - (15px / 5 * 4));
        }

    #instafeed.imagesPerRow6 {
        gap: 10px;
    }

        #instafeed.imagesPerRow6 a {
            width: Calc(100% / 6 - (10px / 6 * 5));
        }


    #instafeed a,
    #instafeed a:visited,
    #instafeed a:hover,
    #instafeed a:visited:hover {
        border: none;
    }

        #instafeed a img {
            vertical-align: top;
            object-fit: cover;
            width: 100%;
            max-height: 100%;
            aspect-ratio: 1/1;
        }

        #instafeed a:hover > .imageContainer img {
            opacity: 0.65;
        }

    #instafeed .captionContainer {
        font-size: 16px;
        margin-top: 5px;
    }



@media screen and (max-width: 1279.9px) {
    #instafeed.imagesPerRow6,
    #instafeed.imagesPerRow5 {
        gap: 20px;
    }

        #instafeed.imagesPerRow6 a,
        #instafeed.imagesPerRow5 a {
            width: Calc(100% / 4 - (20px / 4 * 3));
        }
}

@media screen and (max-width: 1023.9px) {
    #instafeed.imagesPerRow6,
    #instafeed.imagesPerRow5,
    #instafeed.imagesPerRow4 {
        gap: 10px;
    }

    #instafeed.imagesPerRow6 a,
    #instafeed.imagesPerRow5 a,
    #instafeed.imagesPerRow4 a {
        width: Calc(100% / 3 - (10px / 3 * 2));
    }

    #instafeed a:nth-child(9) ~ a {
        display: none;
    }
}

@media screen and (max-width: 767.9px) {

    #instafeed.imagesPerRow6 a,
    #instafeed.imagesPerRow5 a,
    #instafeed.imagesPerRow4 a {
        width: Calc(100% / 3 - (10px / 3 * 2));
    }

    #instafeed a:nth-child(6) ~ a {
        display: none;
    }
}

@media screen and (max-width: 580px) {

    #instafeed.imagesPerRow3 {
        gap: 10px;
    }
    
    #instafeed.imagesPerRow6 a,
    #instafeed.imagesPerRow5 a,
    #instafeed.imagesPerRow4 a,
    #instafeed.imagesPerRow3 a {
        width: Calc(100% / 2 - (10px / 2 * 1));
    }

    #instafeed a:nth-child(4) ~ a {
        display: none;
    }
}

@media screen and (max-width: 400px) {
    #instafeed.imagesPerRow6 a,
    #instafeed.imagesPerRow5 a,
    #instafeed.imagesPerRow4 a,
    #instafeed.imagesPerRow3 a {
        width: 100%;
        margin-bottom: 30px;
    }

    #instafeed a:nth-child(3) ~ a {
        display: none;
    }
}

