@media all and (min-width: 1440px)
/* Desktop */
    {
    .contract {
        padding: 2%;
        grid-column-start: 1;
        grid-column-end: 7;
        border-right: none;
        border-right: 1px solid white;
    }

    .environment {
        grid-column-start: 7;
        grid-column-end: 10;
        padding-left: 20%;
        padding-top: 20%;
        line-height: 200%;
    }

    .appdesign {
        grid-column-start: 10;
        grid-column-end: 13;
        padding-left: 10%;
        padding-top: 30%;
        line-height: 200%;
    }

    .service-tag {
        padding-top: 0;
        padding-bottom: 1%;
        font-size: 20pt;
        height: 40px;
    }
}

@media all and (min-width: 1000px) and (max-width: 1440px)
/* tablet landscape */
    {
    .contract {
        padding: 2%;
        grid-column-start: 1;
        grid-column-end: 7;
        border-right: none;
        border-right: 1px solid white;
    }

    .environment {
        grid-column-start: 7;
        grid-column-end: 10;
        padding-left: 15%;
        padding-top: 20%;
        line-height: 200%;
    }

    .appdesign {
        grid-column-start: 10;
        grid-column-end: 13;
        padding-left: 2%;
        padding-top: 35%;
        line-height: 200%;
        padding-right: 0;
    }

    .service-tag {
        padding-top: 0;
        padding-bottom: 1%;
        font-size: 17pt;
        height: 35px;
    }
}

@media all and (min-width: 738px) and (max-width: 1000px)
/* tablet */
    {
    .contract {
        margin-top: 5%;
        padding: 2%;
        grid-column-start: 1;
        grid-column-end: 7;
        border-right: none;
        border-right: 1px solid white;
    }

    .environment {
        margin-top: 20%;
        grid-column-start: 7;
        grid-column-end: 10;
        padding-left: 7%;
        padding-top: 1%;
        line-height: 200%;
    }

    .appdesign {
        margin-top: 23%;
        grid-column-start: 10;
        grid-column-end: 13;
        padding-left: 10%;
        padding-top: 1%;
        line-height: 250%;
        padding-right: 0;

    }

    .service-tag {
        padding-top: 0;
        padding-bottom: 1%;
        font-size: 15pt;
        height: 30px;
    }
}

@media all and (min-width: 50px) and (max-width: 738px)
/* phone */
    {
    .contract {
        margin-top: 10%;
        padding: 5%;
        grid-column-start: 1;
        grid-column-end: 13;
        border-right: none;
        line-height: 150%;
        text-align: left;
        padding-bottom: 0%;
    }

    .environment {
        grid-column-start: 1;
        grid-column-end: 13;
        padding-left: 5%;
        padding-top: 2%;
        line-height: 150%;
        text-align: left;
    }

    .appdesign {
        grid-column-start: 1;
        grid-column-end: 13;
        padding-left: 5%;
        padding-top: 3%;
        padding-bottom: 5%;
        line-height: 150%;
    }

    .service-tag {
        padding-top: 0;
        padding-bottom: 2%;
        font-size: 15pt;
        height: 35px;
        width: 200px;
    }
}

.services {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    border-radius: 40px;
    color: var(--white);
    background-color: var(--FLGrey);
    margin-top: 2%;
    padding: 2%;
    position: relative;
}

.service-tag {
    background-color: var(--DarkEgg);
    color: var(--White);
    font-weight: 300;
}