/* ============================================================
   Instagram Feed
   ============================================================ */

#instafeed {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
    min-width: 0;
}

    /* Configured column count */

    #instafeed.imagesPerRow3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #instafeed.imagesPerRow4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    #instafeed.imagesPerRow5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 15px;
    }

    #instafeed.imagesPerRow6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 12px;
    }


    /* ============================================================
   Instagram Cards
   ============================================================ */

    #instafeed > a,
    #instafeed > a:visited {
        display: flex;
        flex-direction: column;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
        overflow: hidden;
        border: 1px solid #e2eae5;
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 4px 16px rgba(23, 45, 63, .065);
        color: var(--CSSColor, #333);
        text-decoration: none;
        transition: transform .2s ease, box-shadow .2s ease;
    }

        #instafeed > a:hover,
        #instafeed > a:focus-visible {
            transform: translateY(-3px);
            box-shadow: 0 8px 22px rgba(23, 45, 63, .12);
            text-decoration: none;
        }


    /* ============================================================
   Images and Videos
   ============================================================ */

    #instafeed .imageContainer {
        position: relative;
        width: 100%;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        background: #f1f4f2;
    }

        #instafeed .imageContainer img,
        #instafeed .imageContainer video {
            display: block;
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100% !important;
            max-width: 100%;
            object-fit: cover;
            object-position: center;
            transition: transform .25s ease;
        }

    #instafeed > a:hover .imageContainer img,
    #instafeed > a:hover .imageContainer video {
        transform: scale(1.035);
        opacity: 1;
    }


    /* ============================================================
   Captions
   ============================================================ */

    #instafeed .captionContainer {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
        margin: 0;
        padding: 12px 14px;
        min-height: 64px;
        color: var(--CSSColor, #333);
        font-size: 13px;
        font-weight: 400;
        line-height: 1.5;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    #instafeed > a:hover .captionContainer {
        color: var(--LinkColor, #0A8137);
    }


/* ============================================================
   Responsive
   ============================================================ */

/* Tablet */

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

    #instafeed,
    #instafeed.imagesPerRow3,
    #instafeed.imagesPerRow4,
    #instafeed.imagesPerRow5,
    #instafeed.imagesPerRow6 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }
}

/* Smartphone */

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

    #instafeed,
    #instafeed.imagesPerRow3,
    #instafeed.imagesPerRow4,
    #instafeed.imagesPerRow5,
    #instafeed.imagesPerRow6 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}

/* Small smartphones */

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

    #instafeed,
    #instafeed.imagesPerRow3,
    #instafeed.imagesPerRow4,
    #instafeed.imagesPerRow5,
    #instafeed.imagesPerRow6 {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }
}


/* ============================================================
   Accessibility
   ============================================================ */

#instafeed > a:focus-visible {
    outline: 2px solid var(--LinkColor, #0A8137);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {

    #instafeed > a,
    #instafeed .imageContainer img,
    #instafeed .imageContainer video {
        transition: none;
    }
}