:root {
    --pad: 20px;
}

.fb {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.pad-left { 
    box-sizing: border-box;
    padding-left: var(--pad); 
}

.pad-right { 
    box-sizing: border-box;
    padding-right: var(--pad);  
}

@media (min-width: 700px) {
    .lg-1 { width: 33%; }
    .lg-h { width: 50%; }
    .lg-2 { width: 66%; }
    .lg-3 { width: 100%; }
    .lg-hide { display: none; }
    .lg-pad-left { 
        box-sizing: border-box;
        padding-left: var(--pad);  
    }
    .lg-pad-right { 
        box-sizing: border-box;
        padding-right: var(--pad);  
    }
}

@media (max-width: 700px) {
    .sm-1 { width: 33%; }
    .sm-h { width: 50%; }
    .sm-2 { width: 66%; }
    .sm-3 { width: 100%; }
    .sm-hide { display: none; }
    .sm-pad-left { 
        box-sizing: border-box;
        padding-left: var(--pad);  
    }
    .sm-pad-right { 
        box-sizing: border-box;
        padding-right: var(--pad);  
    }
}