@media all and (min-width: 1440px)
/* Desktop */
    {
    .headlines {
        height: 300px;
        margin-bottom: 60px;
    }

    .articlesmallheader {
        height: 100px;
    }

    .articletext {
        height: 200px;
    }

    .whoami {
        grid-column-start: 1;
        grid-column-end: 5;
    }

    .experience {
        grid-column-start: 5;
        grid-column-end: 9;
    }

    .dual {
        grid-column-start: 9;
        grid-column-end: 13;
    }

    .headlines {
        margin-bottom: 4%;
    }

    .linkedin {
        padding-top: 15px;
        min-width: 40px;
        min-height: 40px;
        padding-left: 15px;

        img {
            height: 100%;
            width: 100%;
        }
    }
}

@media all and (min-width: 1000px) and (max-width: 1440px)
/* tablet landscape */
    {
    .headlines {
        height: 250px;
        margin-bottom: 60px;
    }

    .articlesmallheader {
        height: 70px;
    }

    .articletext {
        height: 200px;
    }

    .whoami {
        grid-column-start: 1;
        grid-column-end: 5;
    }

    .experience {
        grid-column-start: 5;
        grid-column-end: 9;
    }

    .dual {
        grid-column-start: 9;
        grid-column-end: 13;
    }
}

@media all and (min-width: 738px) and (max-width: 1000px)
/* tablet */
    {
    .headlines {
        height: 250px;
        margin-bottom: 50px;
    }

    .articlesmallheader {
        height: 70px;
    }

    .articletext {
        height: 200px;
    }

    .whoami {
        grid-column-start: 1;
        grid-column-end: 5;
    }

    .experience {
        grid-column-start: 5;
        grid-column-end: 9;
    }

    .dual {
        grid-column-start: 9;
        grid-column-end: 13;
    }

}

@media all and (min-width: 50px) and (max-width: 738px)
/* phone */
    {
    .headlines {
        margin-bottom: 20px;
    }

    .whoami {
        grid-column-start: 1;
        grid-column-end: 13;
        margin-bottom: 5px;
    }

    .experience {
        grid-column-start: 1;
        grid-column-end: 13;
        margin-bottom: 5px;
    }

    .dual {
        grid-column-start: 1;
        grid-column-end: 13;
        margin-bottom: 0;
    }

}

.articlesmallheader {
    padding: 2%;
}

.articlesmall {
    text-align: center;
    border-top-left-radius: 21px;
    border-top-right-radius: 21px;
    color: var(--white);

    .articletext {
        justify-content: center;
        align-items: center;
        padding: 2%;
    }
}

.headlines {
    grid-template-columns: repeat(12, 1fr);
    display: grid;
    gap: 1%;
}

.articletext {
    padding: auto;
    background-color: var(--white);
    color: var(--FLGrey);
    border-color: var(--FLGrey);
    border-style: solid;
    border-width: 1px;
    border-top: 0px;
    overflow: hidden;
    text-justify: auto;
}

.whoami {
    background-color: var(--DarkEgg);
    color: black
}

.experience {
    background-color: var(--DarkBlue);
}

.dual {
    background-color: var(--FLGrey);
}