#system {
    margin: 0 20px;
    padding-top: 5em;

    & .description__box {

        & .img__box {
            display: none;
        }

        & p {
            background: var(--light-blue-color);
            padding: 15px;
            border-radius: 12px;
            line-height: 1.7;
            text-align: justify;
            margin-bottom: 20px;
            font-size: 18px;
            color: var(--black-color);
        }
    }

    & .info__box {

        & .info {
            display: flex;
            padding: 0;
            background: var(--medium-blue-color);
            margin-bottom: 20px;
            padding: 15px;
            border-radius: 12px;
            min-height: 150px;
            height: fit-content;
            color: var(--black-color);
            width: 100%;

            &.pac {
                background: var(--dark-blue-color);
                color: var(--white-color);
            }

            & .img__data {
                padding: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 25%;
                
                & img {
                    width: 100%;
                }
            }
            
            & .text__data {
                padding: 0;
                margin-bottom: 0;
                text-align: center; 
                width: 75%;
                
                & h6 {
                    font-size: 48px;
                    font-weight: 700;
                    margin: 0;
                }

                & p{
                    font-size: 24px;
                    padding: 0 15px;
                    text-align: center;
                    margin: 0;
                }
            }
        }
    }
}

@media screen and (min-width: 576px) {
    #system {

        & .description__box {
            display: flex;
            flex-wrap: wrap;

            & .img__box {
                display: flex;
                width: 40%;
                justify-content: center;
                background-image: url("../../../../assets/img/logo/logo-symbol-light.svg");
                background-repeat: no-repeat;
                background-position: center;
                background-size: 100%;

                & img{
                    width: 70%;
                    object-fit: contain;
                }
            }

            & p {
                font-size: 20px;
                
                &:first-of-type {
                    width: 60%;
                    align-content: center;
                }
            }

        }
        
        & .info__box {
            display: flex;
            justify-content: space-between;

            & .info {
                width: calc(33.333% - 13.33px);
                justify-content: flex-start;
                align-items: center;
                margin: 0;
                min-height: 290px;
                flex-direction: column;

                &.pac {
                    margin: 0;
                }

                & .img__data {
                    height: fit-content;
                    width: 60%;
                    margin-bottom: 10px;
                }

                & .text__data {
                    width: 100%;
                    align-self: flex-start;

                    & h6 {
                        font-size: 40px;

                    }

                    & p {
                        padding: 0;
                        font-size: 20px;
                    }
                }
            }
        }
    }
}

@media screen and (min-width: 768px) {
    #system {

        & .description__box {

            & .img__box {
                display: none;
            }

            & p:first-of-type {
                width: 100%;
            }
        }

        & .info__box {

            & .info {
                min-height: 300px;
                padding: 20px;

                & .text__data {

                    & h6 {
                        font-size: 48px;
                    }
                }

                & .img__data {
                    width: 40%;
                }
            }
        }
    }
}

@media screen and (min-width: 992px) {
    #system {
        & .description__box {
            display: grid;
            grid-template-columns: 1fr 3fr;

            & .img__box {
                width: 100%;

                grid-row: 1/3;
                display: flex;
            }
        }

        & .info__box {

            & .info {
                min-height: fit-content;
                flex-direction: row;

                & .img__data{
                    width: 25%;
                }

                & .text__data {
                    width: 75%;

                    & h6 {
                        font-size: 36px;
                    }

                    & p {
                        font-size: 20px;
                        padding-left: 10px;
                    }
                }
            }
        }
    }
}

@media screen and (min-width: 1200px) {
    #system {
        & .description__box {
            grid-template-columns: 3fr 7fr;

            & p {
                height: 165px;
                align-content: center;
                padding: 20px;

                &:nth-child(3){
                    transform: translateY(-25%);
                }
            }
        }

        & .info__box {
            width:70%;
            transform: translate(42.85%, -60%);

            & .info {
                & .text__data {
                    & h6 {
                        font-size: 30px;
                    }

                    & p {
                        font-size: 18px;
                    }
                }
            }
        }
    }
}

@media screen and (min-width: 1400px) {
    #system {
        
        & .description__box {
            display: flex; 
            justify-content: space-between;

            & .img__box {
                display: none;
            }

            & p,
            & p:first-of-type {
                height: 220px;
                width: calc(50% - 10px);
                align-content: normal;
                padding: 40px;

                &:nth-child(3) {
                    transform: none;
                }
            }
        }

        & .info__box {
            width: 100%;
            transform: none;

            & .info {
                & .img__data {
                    width: 20%;
                }

                & .text__data {
                    width: 80%;

                    & h6 {
                        font-size: 40px;
                    }

                    & p {
                        font-size: 28px;
                    }
                }
            }
        }
    }
}

@media screen and (min-width: 1600px) {
    #system {
        
        & .description__box {

            & .img__box {
                display: flex;
                width: 20%;
                height: 400px;
            }

            & p,
            & p:first-of-type {
                width: calc(40% - 20px);
            }
        }

        & .info__box {
            width: 78.93%;
            transform: translate(26.68%, -42.64%);

            & .info {
                height: 187.6;

                & .text__data {

                    & h6 {
                        font-size: 48px;
                    }

                    & p {
                        font-size: 30px;
                    }
                }
            }
        }
    }
}