.single-related {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: block;
    padding: clamp(52px, 6vw, 78px) 0;
    background:
        radial-gradient(circle at 8% 18%, rgb(255 111 0 / 7%) 0, transparent 30%),
        radial-gradient(circle at 92% 82%, rgb(0 0 0 / 6%) 0, transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #fffaf2 100%);
}

.single-related::before,
.single-related::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    border-radius: 999px;
}

.single-related::before {
    width: 320px;
    height: 320px;
    inset-inline-start: -160px;
    top: 55px;
    background: rgb(255 111 0 / 6%);
}

.single-related::after {
    width: 230px;
    height: 230px;
    inset-inline-end: -95px;
    bottom: 45px;
    border: 36px solid rgb(0 0 0 / 4%);
}

.related-row {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 24px;
}

.related-row > * {
    min-width: 0;
}

.related-row > .blog-item {
    width: 100%;
    max-width: 100% !important;
}

.single-related .section-h2,
.single-related .--wid--tit {
    position: relative;
    z-index: 2;
    margin-bottom: 24px !important;
}

@media only screen and (max-width: 1125px) {
    .related-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}

@media only screen and (max-width: 700px) {
    .single-related {
        padding: 44px 0;
    }

    .single-related::after {
        display: none;
    }

    .related-row {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .single-related .section-h2,
    .single-related .--wid--tit {
        margin-bottom: 18px !important;
    }
}

@media only screen and (max-width: 580px) {
    .single-related {
        padding: 40px 0;
    }

    .single-related::before {
        width: 220px;
        height: 220px;
        inset-inline-start: -125px;
    }
}

@media only screen and (max-width: 420px) {
    .single-related {
        padding: 38px 0;
    }

    .related-row {
        gap: 12px;
    }
}
