.swiper-slides-visible .swiper-slide {
    opacity: 0;
    transition: opacity 300ms ease-in-out;
}

.slide-is-visible {
    opacity: 1 !important;
    transition: opacity 300ms ease-in-out;
}

.bg-overlay {
    position: relative;
}

.bg-secondary {
    background-color: var(--bs-secondary) !important;
}

.bg-overlay:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: black;
    opacity: 0.4;
}

.mw-profile {
    max-width: 250px;
}

.ratio-portrait {
    --bs-aspect-ratio: 125%;
}

.post-content ul li {
    list-style-type: disc;
}

.mw-75 {
    max-width: 75%;
}

.lightbox-toggle,
[data-gallery] {
    cursor: pointer;
}

.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
    margin-bottom: 0.7em;
}

.post-content img {
    max-width: 100%;
}

.post-image,
.post-content .post-image {
    margin-left: auto;
    margin-right: auto;
    display: block;
    max-width: 100%;
}

@media screen and (min-width:768px) {

    .post-image,
    .post-content .post-image {
        max-width: 75%;
    }
}

.post-content table {
    --bs-table-color: var(--bs-body-color);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--bs-border-color);
    --bs-table-accent-bg: transparent;
    --bs-table-striped-color: var(--bs-body-color);
    --bs-table-striped-bg: rgba(0, 0, 0, 0.05);
    --bs-table-active-color: var(--bs-body-color);
    --bs-table-active-bg: rgba(0, 0, 0, 0.1);
    --bs-table-hover-color: var(--bs-body-color);
    --bs-table-hover-bg: rgba(0, 0, 0, 0.075);
    width: 100%;
    margin-bottom: 1rem;
    color: var(--bs-table-color);
    vertical-align: top;
    border-color: var(--bs-table-border-color);
}

.post-content table> :not(caption)>*>* {
    padding: 0.5rem 0.5rem;
    background-color: var(--bs-able-bg);
    border-bottom-width: 1px;
    box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
}

.post-content table>tbody {
    vertical-align: inherit;
}

.post-content table>thead {
    vertical-align: bottom;
}

@media screen and (max-width:768px) {
    .realworld__items .ratio {}
}