.category-list {
    max-width: 938px;
    width: 100%;
    margin: 16px 0px 32px;
}

.category-list__main-container {
    position: relative;
    width: 100%;
}

.category-list__header {
    margin-bottom: 24px;
}

.category-list__title h3 {
    margin-bottom: 8px;
}

.category-list__seeall {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
}

.category-list__seeall > p {
    color: var(--design-sys-sec-color__grey--5);
}

.category-list__cards {
    width: 100%;
    overflow-x: auto;
}

.category-list__cards-container {
    height: auto;
    display: grid;
    grid-template-columns: repeat(5, minmax(133px, 1fr));
    justify-content: space-between;
    gap: 48px 16px;
    overflow: hidden;
    transition: 0.5s ease height;
}

.category-list__initial .category-list__cards-container {
    overflow-x: auto;
    flex-wrap: nowrap;
}

.category-list__cards-container::-webkit-scrollbar,
.category-list__cards::-webkit-scrollbar {
    display: none;
}

.category-list__cards-container a,
.category-list__cards-container a:hover {
    text-decoration: none !important;
}

/* Style for the active section*/
.category-list.active .category-list__cards-container .design-sys__thumbnail--hidden {
    display: block;
}
.category-list.active .category-list__show-btn img {
    transform: rotate(-180deg);
}

.category-list__banner {
    background: url('https://cdn.breakthroughbroker.com/assets/bb/MarketingCenter/Hero/modern_realty_dsktp.png');
    background-position: center;
    background-size: cover;
    border-radius: 10px;
    width: 100%;
    height: 172px;
    margin-top: 22px;
    margin-bottom: 8px;
    padding: 32px 20px;
}

.category-list__banner h3 {
    color: #0E1F47;
    width: 216px;
    margin-bottom: 12px;
}

.category-list__banner a {
    border-radius: 8px;
    width: 108px;
    height: 36px;
}

.category-list__banner a {
    color: #fff;
    text-decoration: none;
}

/* Mobile and small screens */
@media (max-width: 1024px) {
    .category-list__cards-container {
        grid-template-columns: repeat(auto-fill, minmax(133px, 1fr));
        row-gap: 0px;
    }

    .category-list:not(.category-list.active) .category-list__cards-container {
        grid-template-rows: auto repeat(4, 0px);
    }

    .category-list__banner {
        background: url('https://cdn.breakthroughbroker.com/assets/bb/MarketingCenter/Hero/mobile/modern_realty_mbl.png');
        background-position: center;
        background-size: cover;
    }

    .category-list__banner h3 {
        margin-bottom: 18px;
    }
}

@media (max-width: 320px) {
    .category-list:not(.category-list.active) .category-list__cards-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 463px) {
    .category_list__show--3 {
        display: none;
    }
}

@media (min-width: 628px) {
    .category_list__show--4 {
        display: none;
    }
}

@media (min-width: 777px) {
    .category_list__show--5 {
        display: none;
    }
}