.semi-circle {
    display: block;
    width: 100%;
}

.semi-circle--beige circle {
    fill: #F3F1E7;
}

.semi-circle--yellow circle {
    fill: rgb(var(--color-cream-yellow));
}

[data-device="tablet"],
[data-device="desktop"] {
    display: none;
}


@media screen and (min-width: 750px) {
    [data-device="mobile"] {
        display: none;
    }

    [data-device="tablet"] {
        display: block;
        margin-bottom: -16px;
    }
}

@media screen and (min-width: 1024px) {
    [data-device="tablet"] {
        display: none;
    }
    
    [data-device="desktop"] {
        display: block;
    }
}