/* MOLECULE > CLUN QUARTERS > LAYOUT */
.molecule-club-quarters .title-holder { margin-bottom: 10px; }
.molecule-club-quarters .percents-holder { margin-bottom: 12px; }
.molecule-club-quarters .goals-holder { margin-bottom: 40px; }


/* MOLECULE > CLUN QUARTERS > PRECENT */
.molecule-club-quarters .percents-holder .col-for,
.molecule-club-quarters .percents-holder .col-against { position: relative; }
.molecule-club-quarters .percents-holder .inner { border-bottom: 1px solid var( --color-mid-gray ); padding-bottom: 10px; }
.molecule-club-quarters .percents-holder .inner > span { display: inline-block; border: 1px solid var( --color-clear-gray ); padding: 0 10px; border-radius: 4px; }
.molecule-club-quarters .percents-holder .inner .bar { position: absolute; bottom: 0; z-index: 100; height: 6px; width: 110px; margin-bottom: -3px; }
.molecule-club-quarters .percents-holder .inner .bar .dsp { height: 6px; min-width: 6px; border-radius: 3px; position: absolute; top: 0; }

.molecule-club-quarters .percents-holder .col-for .inner { }
.molecule-club-quarters .percents-holder .col-against .inner { text-align: right; }
.molecule-club-quarters .percents-holder .col-for .inner .bar { right: 0; }
.molecule-club-quarters .percents-holder .col-against .inner .bar { left: 0; }
.molecule-club-quarters .percents-holder .col-for .inner .bar .dsp { background: var( --goals-for-blue ); right: 0; }
.molecule-club-quarters .percents-holder .col-against .inner .bar .dsp { background: var( --goals-against-red ); left: 0; }

/* MOLECULE > CLUN QUARTERS > GOALS */
.molecule-club-quarters .goals-holder .col-for .inner { }
.molecule-club-quarters .goals-holder .col-against .inner { text-align: right; }

@media only screen and ( min-width: 48em ) {
    
    /* MOLECULE > CLUN QUARTERS > LAYOUT */
    .molecule-club-quarters .title-holder { margin-bottom: 12px; }
    .molecule-club-quarters .percents-holder { margin-bottom: 15px; }
    .molecule-club-quarters .goals-holder { margin-bottom: 60px; }

    /* MOLECULE > CLUN QUARTERS > PRECENT */
    .molecule-club-quarters .percents-holder .inner .bar { width: 180px; }
}

@media only screen and ( min-width: 62em ) {
    
    /* MOLECULE > CLUN QUARTERS > LAYOUT */
    .molecule-club-quarters .title-holder { margin-bottom: 15px; }
    .molecule-club-quarters .percents-holder { margin-bottom: 20px; }
    .molecule-club-quarters .goals-holder { margin-bottom: 80px; }

    /* MOLECULE > CLUN QUARTERS > PRECENT */
    .molecule-club-quarters .percents-holder .inner .bar { width: 220px; margin-bottom: -2px; }
    .molecule-club-quarters .percents-holder .inner .bar .dsp { height: 8px; min-width: 8px; border-radius: 4px; }
}