/*
 * Instagram block: 1-3 embedded posts/reels, centered on the page.
 *
 * Plain CSS (matches gallery.css/documents.css) - no build step in this
 * project, Tailwind is loaded via the CDN Play script.
 *
 * `.instagram-media` gets a defensive `!important` max/min-width: Instagram's
 * own embed.js (loaded async in instagram.js) replaces the blockquote's
 * content once it runs, and re-applies its own inline sizing each time
 * `instgrm.Embeds.process()` is called - an author-stylesheet `!important`
 * rule beats a plain (non-`!important`) inline style in the CSS cascade, so
 * this keeps every embed capped at the same width regardless of what
 * Instagram's script does to the element afterwards.
 */

.instagram-block__header {
    text-align: center;
}

.instagram-block__header p {
    margin-left: auto;
    margin-right: auto;
    max-width: 42rem;
}

.instagram-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
}

.instagram-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 360px;
}

.instagram-media {
    max-width: 360px !important;
    min-width: 280px !important;
    width: 100% !important;
    margin: 0 auto !important;
}

.instagram-item__caption {
    margin-top: 0.5rem;
    text-align: center;
    color: #4b5563;
    font-size: 0.925rem;
}