/* xs */
@media all and (width < 576px) {
    .home {
        .caption h1 {
            font-size: 3rem;
        }

        .caption span {
            font-size: 1.5rem;
        }
    }

    .about {
        .container {
            .inner {
                flex-direction: column;

                .personal-data {
                    width: 100%;

                    .personal-info {
                        flex-direction: column;

                        .image {
                            width: 70%;
                        }

                        ul {
                            width: 100%;
                        }
                    }
                }

                .about-me {
                    width: 100%;
                }
            }
        }
    }

    .services {
        .container{
            .items {
                .item {
                    width: 100%;
                }
            }
        }
    }
}

/* sm */
@media all and (576px <=width < 768px) {
    .home {
        .caption h1 {
            font-size: 3rem;
        }

        .caption span {
            font-size: 1.5rem;
        }
    }

    .about {
        .container{
            .inner {

                .personal-data {
                    width: 100%;
                }

                .about-me {
                    width: 100%;
                }
            }
        }
    }

    .services {
        .container{
            .items {
                .item {
                    width: 100%;
                }
            }
        }
    }
}

/* md */
@media all and (768px <=width < 992px) {
    .home {
        .caption h1 {
            font-size: 3rem;
        }

        .caption span {
            font-size: 1.5rem;
        }
    }

    .about {
        .container{
            .inner {
                .personal-data {
                    width: 100%;
                }

                .about-me {
                    width: 100%;
                }
            }
        }
    }

    .services {
        .container{
            .items {
                .item {
                    width: 50%;
                }
            }
        }
    }

}

/* lg */
@media all and (992px <=width < 1200px) {
    .home {
        .caption h1 {
            font-size: 3.5rem;
        }

        .caption span {
            font-size: 1.25rem;
        }
    }

    .services {
        .container{
            .items {
                .item {
                    width: 50%;
                }
            }
        }
    }
}

/* xl */
@media all and (1200px <=width < 1400px) {}

/* xxl */
@media all and (1400px <=width) {}