@media screen and (min-width: 801px) {
    .smallerfont {
        font-size: 18px;
    }
}

/* For screens narrower than or equal to 800px */
@media screen and (max-width: 800px) {
    .smallerfont {
        font-size: 14px;
    }
}

@media screen and (min-width: 801px) {
    .evensmallerfont {
        font-size: 16px;
    }
}

/* For screens narrower than or equal to 800px */
@media screen and (max-width: 800px) {
    .evensmallerfont {
        font-size: 12px;
    }
}

.smallerfont .custom-control-label::after {
    content: attr(data-after);  /* This will be the part you want to style differently */
    font-size: 12px;  /* Smaller font size */
}

/* Target the main part of the label and hide the marker */
.smallerfont .custom-control-label {
    font-size: 16px;  /* Main font size */
    /* Use a regular expression to remove the marker and everything after it */
    content: regex("^([^\|]*)");
}