.unggulan-carousel {

position: relative;

width: 100%;

overflow: hidden;

}

.unggulan-track-wrap {

overflow: hidden;

}

.unggulan-track {

display: flex;

gap: 16px;

transition: transform .5s cubic-bezier(.4,0,.2,1);

will-change: transform;

}

/* ===== Desktop Besar ===== */

.ung-card {

flex: 0 0 calc((100% - (4 * 16px)) / 5);

background: var(--brown-card);

border: 1px solid var(--brown-border);

border-radius: var(--radius);

overflow: hidden;

transition: border-color var(--transition), transform var(--transition);

cursor: pointer;

}

/* ===== Laptop ===== */

@media (max-width: 1400px) {

.ung-card {

flex: 0 0 calc((100% - (2 * 16px)) / 3);

}

}

/* ===== Tablet ===== */

@media (max-width: 768px) {

.ung-card {

flex: 0 0 calc((100% - 16px) / 2);

}

}

/* ===== Mobile ===== */

@media (max-width: 480px) {

.ung-card {

flex: 0 0 85%;

}

}