.dbtmq {
    display: flex;
    flex-direction: column;
    gap: var(--dbtmq-row-gap);
    max-width: 100%;
    overflow: hidden;
    color: inherit;
    font-family: inherit;
}

.dbtmq-row {
    position: relative;
    display: grid;
    width: 100%;
    height: var(--dbtmq-row-height);
    overflow: hidden;
    color: inherit;
    background: transparent;
    border-block: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}

.dbtmq-row-left {
    grid-template-columns: minmax(140px, var(--dbtmq-fixed-width)) minmax(0, 1fr);
}

.dbtmq-row-right {
    grid-template-columns: minmax(0, 1fr) minmax(140px, var(--dbtmq-fixed-width));
}

.dbtmq-fixed {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: stretch;
    min-width: 0;
    color: inherit;
}

.dbtmq-row-left .dbtmq-fixed {
    grid-column: 1;
    border-right: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}

.dbtmq-row-right .dbtmq-fixed {
    grid-column: 2;
    border-left: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}

.dbtmq-fixed-inner {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: clamp(.65rem, 1.5vw, 1.25rem) clamp(.9rem, 2vw, 1.8rem);
    color: inherit;
    text-decoration: none;
    line-height: 1.08;
}

.dbtmq-fixed-inner strong {
    display: block;
    font-size: clamp(1rem, 1.6vw, 1.45rem);
    font-weight: 700;
}

.dbtmq-fixed-inner small {
    display: block;
    margin-top: .28rem;
    font-size: .82em;
    opacity: .68;
}

.dbtmq-viewport {
    position: relative;
    z-index: 1;
    min-width: 0;
    overflow: hidden;
}

.dbtmq-row-left .dbtmq-viewport {
    grid-column: 2;
}

.dbtmq-row-right .dbtmq-viewport {
    grid-column: 1;
    grid-row: 1;
}

.dbtmq-track {
    display: flex;
    width: max-content;
    height: 100%;
    color: inherit;
    will-change: transform;
}

.dbtmq-set {
    display: flex;
    align-items: stretch;
    gap: 0;
    height: 100%;
    color: inherit;
    padding-right: var(--dbtmq-gap);
}

.dbtmq-item {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: clamp(.65rem, 1.3vw, 1.15rem);
    min-width: clamp(170px, 15vw, 300px);
    height: 100%;
    padding: .5rem clamp(1rem, 2vw, 2rem);
    color: inherit;
    font-family: inherit;
    text-decoration: none;
    white-space: nowrap;
    border-right: 1px solid color-mix(in srgb, currentColor 11%, transparent);
    border-radius: 0;
    background: transparent;
}

a.dbtmq-item:hover,
a.dbtmq-fixed-inner:hover {
    color: inherit;
    background: color-mix(in srgb, currentColor 7%, transparent);
}

.dbtmq-item img {
    display: block;
    width: auto;
    height: auto;
    max-width: min(38vw, 520px);
    max-height: min(var(--dbtmq-image-height), calc(100% - 12px));
    object-fit: contain;
    border-radius: 0;
}

.dbtmq-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.08;
    color: inherit;
}

.dbtmq-text strong {
    font-size: clamp(1rem, 2vw, 1.65rem);
    font-weight: 700;
}

.dbtmq-text small {
    margin-top: .25rem;
    font-size: .85em;
    opacity: .65;
}

@media (max-width: 720px) {
    .dbtmq-row-left {
        grid-template-columns: minmax(120px, min(42vw, var(--dbtmq-fixed-width))) minmax(0, 1fr);
    }
    .dbtmq-row-right {
        grid-template-columns: minmax(0, 1fr) minmax(120px, min(42vw, var(--dbtmq-fixed-width)));
    }
    .dbtmq-item {
        min-width: clamp(145px, 44vw, 240px);
        padding-inline: .85rem;
    }
    .dbtmq-item img {
        max-width: 55vw;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dbtmq-track {
        transform: none !important;
    }
    .dbtmq-viewport {
        overflow-x: auto;
        scrollbar-width: thin;
    }
}