.sourth-africa {
    /* margin → .section utility class */
}

.sourth-africa .container__inner {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.sourth-africa__header {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.sourth-africa__label {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--gap-sm);
    padding: calc(var(--pixel) * 20) calc(var(--pixel) * 25);
    border: solid 1px var(--color-solar-gold);
    width: fit-content;
}

.sourth-africa__label::before {
    content: '';
    display: block;
    width: calc(var(--pixel) * 21);
    height: calc(var(--pixel) * 17);
    background-image: url('../img/dimant.svg');
    background-repeat: no-repeat;
    background-size: contain;
}

.sourth-africa__main {
    width: 100%;
    padding: calc(var(--pixel) * 215) calc(var(--pixel) * 35) calc(var(--pixel) * 35);
    /* background-image → inline <style> из sourth-africa.php (ACF, адаптив) */
    background-repeat: no-repeat;
    background-size: cover;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(var(--pixel) * 26);
}

.sourth-africa__el {
    /* structure + bg → .feature-card .feature-card--white */
    padding: calc(var(--pixel) * 20);
    gap: calc(var(--pixel) * 20);
}

.sourth-africa__el .hr {
    width: calc(var(--pixel) * 104);
    /* height and color → .hr base in design-system/components/divider.css */
}

.sourth-africa__el__icon {
    position: absolute;
    right: calc(var(--pixel) * 20);
    top: calc(var(--pixel) * 20);
    object-fit: contain;
}

.sourth-africa__el:nth-child(1) .sourth-africa__el__icon {
    width: calc(var(--pixel) * 41);
    height: calc(var(--pixel) * 34);
}
.sourth-africa__el:nth-child(2) .sourth-africa__el__icon {
    width: calc(var(--pixel) * 42);
    height: calc(var(--pixel) * 32);
}
.sourth-africa__el:nth-child(3) .sourth-africa__el__icon {
    width: calc(var(--pixel) * 23);
    height: calc(var(--pixel) * 42);
}

@media (max-width: 1439px) {
    .sourth-africa__main {
        padding: calc(var(--pixel) * 35);
        padding-right: calc(var(--pixel) * 242);
        grid-template-columns: repeat(1, 1fr);
        gap: calc(var(--pixel) * 25);
    }
}

@media (max-width: 767px) {
    .sourth-africa__main {
        padding: calc(var(--pixel) * 20);
        padding-right: calc(var(--pixel) * 20);
        gap: calc(var(--pixel) * 20);
    }
    .sourth-africa .container__inner {
        gap: 45px;
    }

    .sourth-africa__label {
        padding: calc(var(--pixel) * 20) calc(var(--pixel) * 16);
        width: 100%;
        font-size: var(--fs-body-3);
    }
}