.tfg-container {
    position: relative;
    width: 100%;
    min-height: 200px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--tfg-gap, 0px);
    box-sizing: border-box;
}

.tfg-container.tfg-full-bleed {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
}

/* 横スクロールOFF時: auto-fill/minmaxで隙間なく画面幅いっぱいに敷き詰める */
.tfg-container.tfg-mode-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--tfg-min-size, 220px), 1fr));
    align-content: flex-start;
}

.tfg-container.tfg-mode-grid .tfg-item {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
}

.tfg-container.tfg-mode-grid .tfg-item img {
    width: 100%;
    height: 100%;
}

.tfg-container.tfg-mode-grid .tfg-sentinel {
    grid-column: 1 / -1;
    width: 100%;
}

.tfg-row {
    position: relative;
    width: 100%;
    flex: 0 0 auto;
    overflow: hidden;
}

.tfg-track {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    gap: var(--tfg-gap, 0px);
    will-change: transform;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.tfg-track.tfg-rtl {
    animation-name: tfg-scroll-rtl;
}

.tfg-track.tfg-ltr {
    animation-name: tfg-scroll-ltr;
}

@keyframes tfg-scroll-rtl {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@keyframes tfg-scroll-ltr {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

.tfg-item {
    flex: 0 0 auto;
    display: block;
    line-height: 0;
    font-size: 0;
    overflow: hidden;
}

.tfg-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    vertical-align: bottom;
    border: none;
}

.tfg-row:hover .tfg-track {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .tfg-track {
        animation: none !important;
    }
}