.component_4 {
    h2 {
        font-weight: 500;
        margin-bottom: 40px;
        margin-top: 30px;
        text-align: center;
        color: var(--primary-color);
    }

    .row_component_4 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        column-gap: 18px;
        row-gap: 16px;

        .col_component_4 {
            background-color: white;
            border-radius: 12px;
            box-shadow: 0px 4px 16.5px 0px rgba(12, 55, 97, 0.20);
            padding: 40px;
            position: relative;
            cursor: pointer;

            h3,
            p {
                font-weight: 500;
                color: var(--primary-color);
            }

            p {
                font-weight: 400;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;

            }

            hr {
                background: #DCE1E8;
                margin: 27px 0;
            }

            .btn {
                width: 100%;
                position: absolute;
                bottom: 0;
                left: 0;
                border-radius: 0 0 12px 12px;
                display: none;
            }

            &:hover {
                p {
                    margin-bottom: 28px;
                    -webkit-line-clamp: initial;

                }

                .btn {
                    display: flex;
                    gap: 3px;
                }
            }
        }
    }
}

.main_template_about_capabilities {
    .component_4 {
        margin-bottom: 70px;
    }
}

/* Portrait */
@media (min-width: 768px) and (max-width: 1200px) and (orientation: portrait) {
    .component_4 {
        .row_component_4 {
            grid-template-columns: repeat(2, 1fr);
        }
    }
}

@media (max-width: 767px) {
    .component_4 {
        .row_component_4 {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    .main_template_about_capabilities {
        .component_4 {
            margin-bottom: 100px;
        }
    }
}

@media (max-width: 576px) {
    .component_4 {
        .row_component_4 {
            grid-template-columns: repeat(1, 1fr);
        }
    }


}