/* Homepage-only mobile service cards. The shared card layout stays unchanged elsewhere. */
.main-page__service-more {
    display: none;
}

@media only screen and (max-width: 767px) {
    .main-page .main-page__services {
        grid-auto-rows: auto;
        gap: 12px;
    }

    .main-page .service-card__wrapper {
        min-height: 188px;
    }

    .main-page .service-card__content {
        gap: 26px;
        padding: 18px 18px 16px;
    }

    .main-page .service-card__count {
        flex-direction: row;
        align-items: end;
        gap: 5px;
        font-size: 3.2rem;
    }

    .main-page .service-card__count span {
        font-size: 1.7rem;
        align-self: end;
        padding-bottom: 2px;
    }

    .main-page .service-card__bottom {
        gap: 7px;
        max-width: 68%;
    }

    .main-page .service-card__name {
        font-size: 2.7rem;
        line-height: 1;
    }

    .main-page .service-card__list {
        gap: 1px;
        font-size: 1.5rem;
        line-height: 1.2;
    }

    .main-page .service-card__img {
        width: min(42%, 160px);
    }

    .main-page .main-page__service-more:not([hidden]) {
        display: block;
    }

    .main-page .main-page__service-more-button {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 56px;
        padding: 10px 18px;
        border: 0;
        border-radius: var(--border-radius-s);
        background: var(--primary-yellow-50);
        color: var(--primary-black);
        font: 2.7rem/1 var(--second-font);
        text-align: left;
        cursor: pointer;
    }

    .main-page .main-page__service-more-button:focus-visible {
        outline: 2px solid var(--primary-black);
        outline-offset: 3px;
    }

    .main-page .main-page__service-more-arrow {
        font: 2.4rem/1 var(--main-font);
    }

    .main-page .main-page__services--collapsed > li:nth-child(n+4) {
        display: none;
    }
}