/* ========================================
   GRID LAYOUT
======================================== */

.family-image-grid {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 22px;

    height: 100%;
}

/* ========================================
   OVERLAY
======================================== */

.family-grid-item::before {
    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(to top, rgba(0, 0, 0, 0.2), transparent 70%);

    opacity: 0;

    transition: opacity 0.35s ease;

    z-index: 1;
}

.family-grid-item:hover::before {
    opacity: 1;
}