.container_component {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;

    .title {
        font-weight: 500;
        text-align: end;
        max-width: 300px;
        text-transform: math-auto;
        color: var(--primary-color);
    }

    .items {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 70px;
        justify-items: center;

        .item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 30px;

            .circulo {
                width: 124px;
                height: 124px;
                background-color: #e7eff2;
                /* opacity: 0.05; */
                border-radius: 50%;
                overflow: hidden;
                display: flex;
                align-items: center;
                justify-content: center;
                img{
                    width: auto;
                    height: 59px;
                }
            }

            p {
                text-align: center;
            }
        }
    }


}

.main_template_about_home,
.main_template_about_servicios {
    .container_component {
        margin-bottom: 60px;
    }
}

.main_template_about_servicios {
    .container_component {
        background-color: white;
        border-radius: 20px;
        padding: 54px 81px 77px 44px;

        .items {
            grid-template-columns: repeat(4, 1fr);
        }

        .title {
            text-align: center;
        }
    }
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .container_component {
        flex-direction: column;

        .title {
            max-width: 100%;
            text-align: center;
        }
    }
}

/* Portrait */
@media (min-width: 768px) and (max-width: 1200px) and (orientation: portrait) {
    .container_component {
        flex-direction: column;

        .title {
            max-width: 100%;
        }

    }

    .main_template_about_servicios {
        .container_component {

            .items {
                grid-template-columns: repeat(3, 1fr);
            }
        }
    }


}

@media (max-width: 767px) {

    .main_template_about_servicios {
        .container_component {

            .items {
                grid-template-columns: repeat(2, 1fr);
            }
        }
    }

    .container_component {
        flex-direction: column;

        .title {
            max-width: 100%;
            text-align: center;
        }

        .items {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    .main_template_about_servicios {
        .container_component {
            padding: 20px;
        }
    }
}