.content-columns {
    margin: 0 auto;
}

.authorimage {
    border: 2px solid var(--col-bg-cream);
}

.author-bio p {
    font-family: var(--fnt-body);
    color: var(--col-text);
}

@media only screen and (max-width: 599px) {
    .content-columns {
        max-width: 250px;
    }

    .authorimage {
        max-width: 250px;
        display: block;
        margin: 20px auto;

    }

    .author-bio p {
        max-width: 250px;
        font-size: 16pt;
    }
}

@media only screen and (min-width: 600px) and (max-width: 767px) {
    .content-columns {
        max-width: 65%;
    }

    .authorimage {
        max-width: 250px;
        display: block;
        margin: 20px auto;

    }

    .author-bio p {
        font-size: 3.25vw;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .content-columns {
        max-width: 65%;
    }

    .authorimage {
        max-width: 300px;
        display: block;
        margin: 20px auto;

    }

    .author-bio p:first-child {
        margin-top: 0px;
    }

    .author-bio p {
        font-size: 2.5vw;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .content-columns {
        max-width: 65%;
        display: grid;
        grid-template:
            "image bio bio";
        gap: 5%
    }

    .authorimage {
        grid-area: image;
        max-width: 250px;
    }

    .author-bio {
        grid-area: bio;
    }

    .author-bio p:first-child {
        margin-top: 0px;
    }

    .author-bio p {
        font-size: 1.7vw;
    }
}

@media only screen and (min-width: 1200px) {
    .content-columns {
        width: 65%;
        max-width: 1750px;
        display: grid;
        grid-template:
            "image bio bio";
        gap: 5%
    }

    .authorimage {
        grid-area: image;
        width: 100%;
        max-width: 500px;
    }

    .author-bio {
        grid-area: bio;
    }

    .author-bio p:first-child {
        margin-top: 0px;
    }

    .author-bio p {
        font-size: 25px;
    }
}