/* ========================================
   GRID ITEM
======================================== */

.family-grid-item {
    position: relative;

    overflow: hidden;

    border-radius: 22px;

    background: #ffffff;

    cursor: pointer;

    min-height: 270px;

    max-height: 270px;

    border: 3px solid transparent;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.05),
        0 18px 40px rgba(0, 0, 0, 0.06);

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

/* Hover */

.family-grid-item:hover {
    transform: translateY(-5px);
}

/* Active */

.family-grid-item.active {
    border-color: #c8a97e;

    transform: translateY(-5px);

    box-shadow:
        0 16px 36px rgba(0, 0, 0, 0.08),
        0 24px 55px rgba(0, 0, 0, 0.08);
}