.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"],
[data-device="large-desktop"],
[data-device="xlarge-desktop"],
[data-device="monitor"] {
    display: none !important;
}


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

    [data-device="tablet"] {
        display: block !important;
    }
}

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

    [data-device="tablet"] {
        display: none !important;
    }
    
    [data-device="desktop"] {
        display: block !important;
    }
}

@media screen and (min-width: 1440px) {
    [data-device="desktop"] {
        display: none !important;
    }

    [data-device="large-desktop"] {
        display: block !important;
    }
}

@media screen and (min-width: 1800px) {
    [data-device="large-desktop"] {
        display: none !important;
    }

    [data-device="xlarge-desktop"] {
        display: block !important;
    }
}

@media screen and (min-width: 2200px) {
    [data-device="xlarge-desktop"] {
        display: none !important;
    }

    [data-device="monitor"] {
        display: block !important;
    }
}