:root {
    --bs-width: 660px;
    --bs-height: calc(var(--bs-width) * 5 / 9);
}

.content {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bc {
    width: var(--bs-width);
    height: var(--bs-height);
    background: var(--bc-background);
    background-size: 100% 100%;
}

.bc > .pic {
    width: calc(var(--bs-width) * .25);
    height: calc(var(--bs-height) * .4);
    margin: calc(var(--bs-height) * .3) calc(var(--bs-width) * .04);
    float: left;
}

.bc > .info {
    height: calc(var(--bs-height) * .80);
    flex-grow: 1;
    margin: calc(var(--bs-height) * .1) 0 calc(var(--bs-height) * .01) .1ex;
    width: calc(var(--bs-width) * .65);
    float: left;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.bc > .info > .name {
    font-weight: bold;
    font-size: 27px;
    position: relative;
    left: -5px;
}

.bc > .info > .name > .title {
    display: inline-block;
    position: relative;
    left: -4ex;
    width: 0;
    font-size: 16px;
    font-style: italic;
}

.bc > .info > .quote {
    font-style: italic;
}

.bc > .info > .stroke-line {
    background: var(--color-stroke-line);
    height: 5px;
    width: 10ex;
    margin: .2em 0;
}

.bc > .info > table {
    border-spacing: 5px;
    border-collapse: separate;
}

td > i {
    padding-right: .2ex;
    color: var(--bc-color-links);
}

td > a {
    color: var(--bc-color-links);
    font-weight: bolder;
}

@media (max-width: 700px) {
    .bc {
        display: flex;
        flex-direction: column;
        align-items: center;
        background: var(--color-secondary) !important;
        height: auto !important;
        padding: 1em 0;
    }

    .bc > .pic {
        margin: 0 !important;
        float: none !important;
    }

    .bc > .info {
        width: auto !important;
        float: none !important;
    }

    .bc > .info > .name {
        position: initial;
    }

    .bc > .info > .name > .title {
        display: inline;
        position: initial;
    }
}

@media (max-width: 700px) and (orientation: landscape) {
    .bc {
        margin-top: 9rem !important;
    }
}