.atom-input { display: flex; flex-wrap: wrap; }

.atom-input label {  display: block; flex: 0 0 100%; font-family: var( --font-filson ); font-style: normal; font-weight: 600; 
    font-size: 14px; line-height: 19px; color: var( --color-dark-gray ); margin-bottom: 14px; }

.atom-input .input-holder { display: block; flex: 0 0 100%; position: relative; }
.atom-input .input-holder input { background: var( --color-almost-white ); display: block; font-family: var( --font-filson ); font-style: normal; font-weight: 600; 
    font-size: 14px; line-height: 19px; color: var( --color-dark-gray ); padding: 15px 14px; width: 100%; }
    

.atom-input input[type="button"],
.atom-input input[type="reset"],
.atom-input input[type="submit"] { border-radius: 50px; color: var( --color-pure-white ); background: var( --grad-punch-orange ); }
    

/*
.atom-input .input-holder .icon { position: absolute; top: 0; left: 0; height: 47px; width: 40px; }
.atom-input .input-holder .icon svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.atom-input .input-holder .icon svg path { fill: var( --color-dark-gray ); }

.atom-input.has-icon-left .icon { left: 0; }
.atom-input.has-icon-left .input-holder input { padding-left: 40px; }

.atom-input.has-icon-right .icon { right: 0; }
.atom-input.has-icon-right .input-holder input { padding-right: 40px; }


*/




/* ATOM > BASE > LAYOUT 

.atom-base { background: fuchsia; padding: 15px 0; border-bottom: 3px solid red; }

@media only screen and ( min-width: 48em ) {

    /* ATOM > BASE > LAYOUT 
    .atom-base { background: Orchid; }
}

@media only screen and ( min-width: 62em ) { 

    /* ATOM > BASE > LAYOUT 
    .atom-base { background: violet; }

}

@media only screen and ( min-width: 75em ) { 

    /* ATOM > BASE > LAYOUT 
    .atom-base { background: pink; }

}

*/