.apiCatalogSection {
    background-color: #F4F4FF;
    align-items: center;
    display: flex;
    flex-direction: column;
    padding: 76px 0 93px 0;
}


.cardsList {
    display: flex;
    gap: 20px;
    height: 136px;
    list-style-type: none;
    margin-bottom: 64px;
    padding: unset;
}

    .cardsList .card {
        width: 71px;
        text-align: center;
        padding: 16px 24px;
        display: flex;
        gap: 0.5rem;
        border-radius: 8px;
        border: 3px solid #929292;
        flex-direction: column;
        background-color: white;
        cursor: pointer;
        align-items: center;
    }

.card img {
    width: 52px;
    height: 52px;
}

.active {
    border: 3px solid black !important;
}

.apiList {
    display: flex;
    gap: 100px;
}

    .apiList ul {
        list-style-type: none;
        padding: unset;
        gap: 32px;
        display: flex;
        flex-direction: column;
    }

    .apiList li {
        display: flex;
    }

        .apiList li img {
            width: 1.5rem;
            margin-left: 1.5rem;
        }

@media screen and (max-width:768px) {

    .apiCatalogSection {
        align-items: start;
        padding: 29px 26px 35px 0;
    }
        .apiCatalogSection h2 {
            margin: 0;
            padding: 0 0 32px;
        }

    .cardsContainer {
        width: 100%;
        overflow-x: scroll;
        overflow-y: hidden;
        padding:0;
    }

    .cardsList {
        width: max-content;
        height: unset;
        margin: unset;
        padding: 0 0 0 26px;
    }

        .cardsList .card {
            width: 71px;
            padding: 16px 24px;
        }

    .apiList {
        flex-direction: column;
        padding: 32px 0 0;
        gap: 32px;
        margin: unset;
    }
}