/* Modern Instagram Feed Styles - Mosaic Theme */

.mif-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100vw;
    /* Full Viewport Width */
    max-width: 100%;
    margin: 0;
    margin-left: calc(-50vw + 50%);
    /* Force full width breaking out of container if needed */
    margin-right: calc(-50vw + 50%);
    grid-auto-flow: dense;
    /* Crucial for packing the tall items */
}

/* 
   Reset margins if the parent container is already full width 
   or if we don't want to break out of the content area aggressively. 
   But user asked for "largura total da pagina".
*/

.mif-item {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    /* Square tiles */
    transition: all 0.3s ease;
}

/* Tall Item */
.mif-item.mif-tall {
    grid-row: span 2;
    aspect-ratio: 1 / 2;
    /* Double height */
}

/* Background Colors */
.mif-bg-dark {
    background-color: #2c2c36;
    color: #fff;
}

.mif-bg-grey {
    background-color: #e0e5eb;
    color: #5a6b7c;
}

.mif-bg-pink {
    background-color: #ff3366;
    color: #fff;
}

.mif-bg-blue {
    background-color: #6c7a89;
    color: #fff;
}

.mif-link {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    text-decoration: none;
    color: inherit;
}

.mif-content {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 2;
    max-width: 80%;
    transition: opacity 0.3s ease;
}

.mif-title {
    margin: 0;
    font-size: 1.5rem;
    /* Slightly larger */
    font-weight: 700;
    line-height: 1.2;
}

/* Image Wrapper (Circle Bottom Right) */
.mif-image-wrapper {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    z-index: 1;
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.mif-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Hover Effects */
.mif-item:hover .mif-image-wrapper {
    width: 100%;
    height: 100%;
    bottom: 0;
    right: 0;
    border-radius: 0;
    z-index: 0;
}

.mif-item:hover .mif-content {
    opacity: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .mif-container {
        grid-template-columns: repeat(2, 1fr) !important;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }

    .mif-item.mif-tall {
        grid-row: span 1;
        /* Disable tall on mobile to avoid layout breaking */
        aspect-ratio: 1 / 1;
    }
}

@media (max-width: 480px) {
    .mif-container {
        grid-template-columns: 1fr !important;
    }
}