.grid-col-span-2 {

    grid-column: span 2;

}

.grid-col-span-3 {

    grid-column: span 3;

}

.grid-col-span-4 {

    grid-column: span 4;

}

.grid-col-span-6 {

    grid-column: span 6;

}

.grid-col-span-8 {

    grid-column: span 8;

}

.grid-col-span-12 {

    grid-column: span 12;

}



.body h1 {

    font-size: 4rem;

}

.body h2 {

    font-size: 3rem;

}

.body p {

    text-align: justify;

}

.body div > * {

    padding : 3rem;

}



.title {

    position: relative;

    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../images/embedded-system.jpeg');

    background-size: cover;

    color: white;

    width: 100%;

}

.title > div {

    margin: 0 auto;

}

.intro {

    display: none;

    padding: 3rem;

}



.intro > img {

    width: 100%;

}

.feature {

    padding: 3rem;

}

.feature > img {

    display: none;

    width: 100%;

}

.works {

    background-color: #08399C;

    color: white;

    box-shadow: inset 0 0 900px #00000088;

}

.works > ul {

    list-style: none;

    display: flex;

    flex-direction: column;

    gap: 4rem;

    margin: 0 auto;

}

.works > ul > li {

    border-top: 1px solid white;

    border-bottom: 1px solid white;

}

.expertise{

    width: 100%;

}

.expertise > div {

    margin: 0 auto;

}

.expertise > div > h1 {

    text-align: center;

}

.expertise > div > ul {

    display: flex;

    justify-content: center;

    flex-direction: column;

    list-style: none;

    max-width: 35rem;

    gap: 5rem;

    margin: 0 auto;

    font-size: 2.5rem;

    text-align: center;

}

.expertise > div > ul > li {

    box-shadow: 0px 2px 2px 0px #072c76;

    border-bottom: 1px solid #08399c42;

}



.expertise > div >ul > li > i {

    font-size: 10rem;

    color: #08399C;

}





@media (min-width: 700px) {

    * {

        font-size: 1.2rem;

    }

    .width-80 {

        width: 80%;

    }

    .body {

        display: grid;

        grid-template-columns: 1fr;

        align-items: center;

        justify-items: center;

    }

    .body h1 {

        font-size: 3rem;

    }

    .body h2 {

        font-size: 2rem;

    }

    .title h1, .title p {

        padding: 0;

    }

    .intro {

        display: grid;

        grid-template-columns: repeat(3, 1fr);

        gap: 3rem;

        align-items: center;

        justify-items: center;

    }

    .intro img, .intro p {

        padding: 0;

    }

    .feature {

        display: grid;

        grid-template-columns: repeat(3, 1fr);

        gap: 3rem;

        align-items: center;

        justify-items: center;

        grid-row: 4/5;

    }

    .feature img {

        display: block;

    }

    .feature h2 {

        text-align: left;

    }

    .feature p, .feature img, .feature h2 {

        padding: 0;

    }

    .works {

        display: grid;

        justify-items: center;

    }

    .works > ul {

        display: grid;

        grid-template-columns: repeat(3, 1fr);

    }

    .works > ul > li {

        display: grid;

        grid-template-columns: 1fr;

        grid-template-rows: 1fr 1.5fr;

    }



    .expertise {

        display: grid;

        grid-template-columns: 1fr;

        background-color: #08399C;

        /* box-shadow: inset 0 0 900px #00000088; */

        border-bottom: 5px solid white;

        color: white;

    }

    .expertise > div {

        display: grid;

        grid-template-columns: 1fr;

        gap: 3rem;

    }

    .expertise > div > h1 {

        padding: 0;

    }

    .expertise > div > ul {

        display: grid;

        max-width: 100%;

        padding: 0;

        grid-template-columns: repeat(4, 1fr);

        font-size: 1rem;

    }

    .expertise > div > ul > li {

        border: 1px solid rgba(0, 0, 0, 0.053);

        box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.175);

        padding: 1.5rem;

        font-weight: bold;

    }

    .expertise > div > ul > li > i {

        font-size: 5rem;

        color: wheat;

        margin-bottom: 1rem;

    }



}