/* Introduction: only change the grid, leaving each selected Style's card intact. */
#page-4 :is(.shortcode-services, .ta-service-block) .row:has(> .ta-service-column) {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
#page-4 :is(.shortcode-services, .ta-service-block) .row > .ta-service-column {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
@media (max-width: 991.98px) {
    #page-4 :is(.shortcode-services, .ta-service-block) .row:has(> .ta-service-column) {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Preserve the full original artwork; never enlarge/crop it on hover. */
:is(.shortcode-services, .ta-service-block) :is(.services-thumb, .services-thumb-two, .services-thumb-three, .project-thumb-three) img:not(.item-shape) {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 8 / 5;
    object-fit: contain;
    object-position: center;
    padding: 10px;
    background: #fff;
    transform: none;
    box-sizing: border-box;
}
/* Keep service blocks full-width and balanced on phones and small tablets. */
@media (max-width: 991px) {
    :is(.shortcode-services, .ta-service-block) .row:has(> .ta-service-column) {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-auto-rows: 1fr;
        row-gap: 24px;
    }
    :is(.shortcode-services, .ta-service-block) .ta-service-column > div:first-child {
        height: 100%;
        margin-bottom: 0;
    }
    .shortcode-services-style-1 .ta-service-column > .services-item {
        display: flex;
        flex-direction: column;
    }
    .shortcode-services-style-1 .services-content {
        display: flex;
        flex-direction: column;
        flex: 1;
    }
    .shortcode-services-style-1 .services-content > .btn {
        margin-top: auto;
    }
    :is(.shortcode-services, .ta-service-block) {
        padding-inline: 0;
    }
    :is(.shortcode-services, .ta-service-block) > .container {
        width: 100%;
        max-width: none;
        padding-inline: 16px;
        margin-inline: auto;
    }
    /* A page container already supplies the outer gutter. */
    .container :is(.shortcode-services, .ta-service-block) > .container {
        padding-inline: 0;
    }
    :is(.shortcode-services, .ta-service-block) .container .container {
        max-width: none;
        padding-inline: 0;
    }
    :is(.shortcode-services, .ta-service-block) .row {
        --bs-gutter-x: 24px;
        margin-inline: -12px;
    }
    :is(.shortcode-services, .ta-service-block) .row > [class*="col-"] {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        padding-inline: 12px;
        margin-inline: 0;
    }
    :is(.shortcode-services, .ta-service-block) :is(.services-item-wrap, .services__item-wrap-two, .services-bottom-content, .section-content, .section-top-content) {
        padding-inline: 0;
        margin-inline: 0;
        max-width: 100%;
    }
    :is(.shortcode-services, .ta-service-block) :is(.services-item, .services__item-two, .services__item-three, .services__item-five, .card-services-type-01) {
        padding-inline: 20px;
        margin-inline: 0;
        min-width: 0;
        max-width: 100%;
    }
    /* Do not stack the image card's content padding on top of its outer padding. */
    :is(.shortcode-services, .ta-service-block) .services-item > .services-content {
        padding-inline: 0;
    }
    :is(.shortcode-services, .ta-service-block) :is(.services__item-top-title, .card-info) {
        min-width: 0;
    }
    :is(.shortcode-services, .ta-service-block) .section-title {
        padding-inline: 0;
        margin-inline: 0;
    }
}