/* Wider visual canvas for galleries and related cards; prose remains readable. */
@media (min-width: 1360px) {
    body.single-post .main > .container {
        max-width: 1400px;
    }

    body.single-post #single-content .article-content > :not(.gallery):not(.single-join):not(.retuku-broken-gallery),
    body.single-post #single-content > .article-act,
    body.single-post #single-content > .article-share {
        max-width: 1160px;
        margin-right: auto;
        margin-left: auto;
    }

    /* The title belongs to the visual gallery canvas, not the narrower prose column. */
    body.single-post #single-content .article-header {
        max-width: none;
        margin-right: 0;
        margin-left: 0;
    }
}

body.single-post .single-related .grids.relateds {
    display: flex;
    flex-wrap: wrap;
    margin-right: -8px;
    margin-left: -8px;
}

/* Let related posts share the site's canvas, consistent with archive grids. */
body.single-post .single-related,
body.night.single-post .single-related {
    background: transparent;
    box-shadow: none;
}

body.single-post .single-related .grids.relateds .grid,
body.single-post.gd-mini .single-related .grids.relateds .grid {
    width: calc(20% - 16px);
    margin: 0 8px 16px;
}

body.single-post .single-related .grids.relateds .grid .img,
body.single-post.gd-mini .single-related .grids.relateds .grid .img {
    height: auto !important;
    aspect-ratio: 18 / 19;
}

body.single-post .single-related .grids.relateds .grid .thumb {
    object-fit: cover;
}

@media (max-width: 1359px) {
    body.single-post .single-related .grids.relateds .grid,
    body.single-post.gd-mini .single-related .grids.relateds .grid {
        width: calc(25% - 16px);
    }
}

@media (max-width: 900px) {
    body.single-post .single-related .grids.relateds .grid,
    body.single-post.gd-mini .single-related .grids.relateds .grid {
        width: calc(33.3333% - 16px);
    }
}

@media (max-width: 620px) {
    body.single-post .single-related {
        padding-right: 10px;
        padding-left: 10px;
    }

    body.single-post .single-related .grids.relateds .grid,
    body.single-post.gd-mini .single-related .grids.relateds .grid {
        width: calc(50% - 12px);
        margin-right: 6px;
        margin-left: 6px;
    }
}

@media (max-width: 360px) {
    body.single-post .single-related .grids.relateds .grid,
    body.single-post.gd-mini .single-related .grids.relateds .grid {
        width: calc(100% - 12px);
    }
}