.card-extra-topics {
    background-color: transparent;
    border: 0;
    margin-bottom: var(--spacing-sm);
}

.image-extra-topics {
    width: 100%;
    max-height: 280px;
    height: 280px;
    object-fit: cover;
    display: block;
    border-radius: 12px;
}

.card-extra-topics .card-body {
    padding: var(--spacing-sm);
}

.card-extra-topics .card-title {
    margin-bottom: var(--spacing-xs);
}

@media (max-width: 768px) {
    .card-extra-topics {
        min-width: 250px;
    }
    
    .card-extra-topics .card-body {
        padding: var(--spacing-xs);
    }
}

@media (max-width: 1024px) {
    .scroll-horizontal::-webkit-scrollbar {
        height: 8px;
    }
    
    .scroll-horizontal::-webkit-scrollbar-thumb {
        background: transparent;
        border-radius: 4px;
    }
    
    .scroll-horizontal {
        scroll-snap-type: x mandatory;
    }
    
    .scroll-horizontal .card {
        scroll-snap-align: start;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .card-extra-topics {
        min-width: 350px;
    }
}

@media (min-width: 1025px) {
    .card-extra-topics {
        flex: 0 0 calc(33.333% - 1rem);
        max-width: calc(33.333% - 1rem);
    }
}