/* Top Tier Featured Gallery Widget */
.ttfg-wrap {
    --ttfg-gap: 15px;
    --ttfg-height: 375px;
    --ttfg-radius: 6px;
    --ttfg-columns: 3;
    --ttfg-bottom-columns: 5;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    gap: var(--ttfg-gap);
    align-items: stretch;
}

.ttfg-featured,
.ttfg-grid-item {
    display: block;
    overflow: hidden;
    border-radius: var(--ttfg-radius);
    line-height: 0;
}

.ttfg-featured {
    height: var(--ttfg-height);
}

.ttfg-grid {
    display: grid;
    grid-template-columns: repeat(var(--ttfg-columns), minmax(0, 1fr));
    gap: var(--ttfg-gap);
    height: var(--ttfg-height);
}

.ttfg-grid-item {
    min-height: 0;
}

.ttfg-featured img,
.ttfg-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ttfg-bottom {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(var(--ttfg-bottom-columns), minmax(0, 1fr));
    gap: var(--ttfg-gap);
}

.ttfg-bottom .ttfg-grid-item {
    height: 180px;
}

@media (max-width: 1024px) {
    .ttfg-wrap {
        grid-template-columns: 1fr;
    }

    .ttfg-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        height: auto;
    }

    .ttfg-grid .ttfg-grid-item {
        height: 160px;
    }

    .ttfg-bottom {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .ttfg-grid,
    .ttfg-bottom {
        grid-template-columns: 1fr;
    }

    .ttfg-featured,
    .ttfg-grid .ttfg-grid-item,
    .ttfg-bottom .ttfg-grid-item {
        height: auto;
        aspect-ratio: 16 / 10;
    }
}