.det-square-services-catalog,
.det-square-services-catalog * { box-sizing: border-box; }

.det-square-services-catalog {
    width: min(100%, 1888px);
    max-width: 1888px;
    margin: 0 auto;
    padding: 0 24px;
    color: inherit;
    font-family: inherit;
}
.det-square-services-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; align-items: stretch; }
.det-square-service-card { display: grid; grid-template-columns: 96px minmax(0,1fr); min-width: 0; min-height: 170px; overflow: hidden; color: inherit; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.24); border-color: color-mix(in srgb,currentColor 24%,transparent); border-radius: 11px; }
.det-square-service-image { display: block; width: 96px; height: 96px; aspect-ratio: 1 / 1; object-fit: cover; background: rgba(255,255,255,.05); border-right: 1px solid color-mix(in srgb,currentColor 16%,transparent); border-bottom: 1px solid color-mix(in srgb,currentColor 16%,transparent); }
.det-square-service-content { display: flex; flex-direction: column; min-width: 0; padding: 13px; }
.det-square-service-name { margin: 0 0 7px; color: inherit; font-family: inherit; font-size: clamp(1.08rem,1.2vw,1.38rem); line-height: 1.16; overflow-wrap: anywhere; }
.det-square-service-meta { display: flex; flex-wrap: wrap; gap: 4px 9px; margin: 0 0 8px; color: inherit; font-family: inherit; font-size: .83rem; line-height: 1.3; }
.det-square-service-meta span:not(:last-child)::after { margin-left: 9px; content: "•"; opacity: .45; }
.det-square-service-meta strong { font-weight: 700; }
.det-square-service-description { display: -webkit-box; margin: 0; overflow: hidden; color: inherit; font-family: inherit; font-size: .84rem; line-height: 1.42; white-space: pre-line; opacity: .86; -webkit-box-orient: vertical; -webkit-line-clamp: 5; }
.det-square-services-empty, .det-square-services-error { margin: 0; color: inherit; font-family: inherit; }
.det-square-services-error { color: #ff8a8a; }

@media (max-width: 1500px) { .det-square-services-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 1080px) { .det-square-services-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 700px) {
    .det-square-services-catalog { width: 100%; max-width: 100%; padding-right: 16px; padding-left: 16px; }
    .det-square-services-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .det-square-service-card { grid-template-columns: 84px minmax(0,1fr); min-height: 155px; }
    .det-square-service-image { width: 84px; height: 84px; }
    .det-square-service-content { padding: 11px; }
}