.categories {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 24px;
}

.categories__card {
    box-shadow:
        0px 1px 2px 0px rgba(204, 204, 209, 0.1),
        0px 4px 4px 0px rgba(204, 204, 209, 0.09),
        0px 9px 5px 0px rgba(204, 204, 209, 0.05),
        0px 15px 6px 0px rgba(204, 204, 209, 0.01),
        0px 24px 7px 0px rgba(204, 204, 209, 0),
        0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    background: white;
    border: 1px solid var(--gray);
    border-radius: 12px;
    width: 301px;
}

.categories__img__wrapper {
    height: 212px;
    width: 100%;
    background: var(--gray);
    border-radius: 12px;
}

.categories__img__wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.categories__content {
    padding: 12px 16px 24px;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.categories__button {
    margin-top: auto;
    border-radius: 8px;
}

@media (min-width: 1440px) {
    .categories__content {
        height: 156px;
        font-size: 24px;
        line-height: 30px;
        font-weight: 700;
    }

    .categories__title {
        margin-bottom: 12px;
    }
}

@media (max-width: 1439px) {
    .categories__card {
        box-shadow:
            0px 1px 2px 0px rgba(204, 204, 209, 0.1),
            0px 4px 4px 0px rgba(204, 204, 209, 0.09),
            0px 9px 5px 0px rgba(204, 204, 209, 0.05),
            0px 15px 6px 0px rgba(204, 204, 209, 0.01),
            0px 24px 7px 0px rgba(204, 204, 209, 0);
        width: 170px;
    }

    .categories__img__wrapper {
        height: 140px;
    }

    .categories__content {
        padding: 12px;
    }

    .categories__button {
        display: none;
    }
}