.about {
    width: calc(100% - 48px);
    margin: 24 0 56px 24;
    background: var(--background);
    color: var(--foreground);
    display: inline-block;
    padding: 48;
    box-sizing: border-box;
    border-radius: 6px;
    box-shadow: 0 0 2px rgb(0 0 0 / 14%), 0px 20px 15px rgb(0 0 0 / 20%);
}

.about .wrapper {
    margin: 36 auto 36;
    width: 1200;
    max-width: 100%;

    display: grid;
    grid-template-columns: auto max-content;
}


.about .wrapper img{
    width: 300;
}

.about hr {
    width: 80%;
    margin: 0;
}

@media screen and (max-width: 800px) {
    .about .wrapper {
        grid-template-columns: auto;
    }

    .about .wrapper .right {
        margin-top: 48;
    }
}