/* start of sidebar */

/* end of sidebar */

/* start of content */
/* start of hero section */
section.hero {
    gap: 1rem;
}

section.hero div.hero>div {
    display: flex;
    flex: 0 0 100%;
}

section.hero img {
    object-fit: contain;
    top: calc(var(--navbar-height) + 1rem);
}

section.about picture {
    position: relative;
}

section.about picture::after {
    content: "";
    --o: 1rem;
    position: absolute;
    top: 0;
    left: calc(var(--o) * -1);
    width: calc(100% + var(--o) + var(--o));
    height: 100%;
    background-color: var(--wc-white);
    z-index: -1;
}

@media screen and (min-width: 768px) {
    section.hero div.hero>div {
        flex-basis: calc(50% - 0.5rem);
    }

    section.hero img {
        border-radius: 0.5rem;
    }
}

/* end of hero section */