.mr-seal-container {
    display: grid;
    gap: 10px;
    padding: 20px 0;
}

.mr-seal-container.one-column {
    grid-template-columns: 1fr;
}

.mr-seal-container.two-column {
    grid-template-columns: repeat(2, 1fr);
}

.mr-seal-container.three-column {
    grid-template-columns: repeat(3, 1fr);
}

.mr-seal-container.one-row {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-flow: row;
    overflow-x: visible;
}

/* 動態調整水平排列的每行顯示數量 (4-12) */
.mr-seal-container.one-row[data-per-row="1"] {
    grid-template-columns: repeat(1, 1fr);
}

.mr-seal-container.one-row[data-per-row="2"] {
    grid-template-columns: repeat(2, 1fr);
}

.mr-seal-container.one-row[data-per-row="3"] {
    grid-template-columns: repeat(3, 1fr);
}

.mr-seal-container.one-row[data-per-row="4"] {
    grid-template-columns: repeat(4, 1fr);
}

.mr-seal-container.one-row[data-per-row="5"] {
    grid-template-columns: repeat(5, 1fr);
}

.mr-seal-container.one-row[data-per-row="6"] {
    grid-template-columns: repeat(6, 1fr);
}

.mr-seal-container.one-row[data-per-row="7"] {
    grid-template-columns: repeat(7, 1fr);
}

.mr-seal-container.one-row[data-per-row="8"] {
    grid-template-columns: repeat(8, 1fr);
}

.mr-seal-container.one-row[data-per-row="9"] {
    grid-template-columns: repeat(9, 1fr);
}

.mr-seal-container.one-row[data-per-row="10"] {
    grid-template-columns: repeat(10, 1fr);
}

.mr-seal-container.one-row[data-per-row="11"] {
    grid-template-columns: repeat(11, 1fr);
}

.mr-seal-container.one-row[data-per-row="12"] {
    grid-template-columns: repeat(12, 1fr);
}

.mr-seal-container.first-large {
    grid-template-columns: repeat(2, 1fr);
}

.mr-seal-container.first-large .mr-seal-item:first-child {
    grid-column: 1 / -1;
}

.mr-seal-container.first-large .mr-seal-item:first-child img {
    max-width: 300px;
    max-height: 250px;
}

.mr-seal-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.mr-seal-container:not(.one-row) {
    max-width: 300px;
    margin: 0 auto;
}

.mr-seal-item img {
    max-width: 100%;
    height: auto;
    max-height: 150px;
    object-fit: contain;
}

@media screen and (max-width: 1024px) {
    .mr-seal-container.three-column {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .mr-seal-container.two-column,
    .mr-seal-container.three-column {
        grid-template-columns: 1fr;
    }
    
    .mr-seal-container.one-row.mobile-one-column {
        grid-template-columns: 1fr;
        grid-auto-flow: row;
    }
    
    .mr-seal-container.one-row.mobile-two-column {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-flow: row;
        overflow-x: visible;
    }
}