body {
    display: grid;
    justify-content: center;
}

main {
    width: 1000px;
    border-style: solid solid none solid;
    border-color: black;
    border-width: 1px;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}

.strange-about {
    grid-column: auto / span 12;
    padding: 0px 40px 0px 40px;
    border-bottom: solid black 1px;
    & h3 {text-align: center;}
    & h2 {text-align: center;}
}

.strange-image {
    grid-column: auto / span 4;
    padding: 10px;
    display: grid;
    align-content: center;
    border-bottom: solid black 1px;
    border-right: solid black 1px;
}

.strange-image img {
    width: 100%;
}

.strange-bio {
    padding: 10px;
    grid-column: auto / span 8;
    border-bottom: solid black 1px;
}

@media only screen and (width < 1000px) {
    .strange-image {grid-column: auto / span 12; border: none; padding: 10px 10px 0px 10px;}
    .strange-bio {grid-column: auto / span 12; padding: 0px 10px 0px 10px}
    main {width: 90vw;}

}