Flex Grid: Advanced Sizing

Ready

HTML
View
Context
Assets
Info
Notes


        
        
        <style>
    .index__align-right___2mklA {
        justify-content: flex-end;
    }
    
    .index__align-center___2McEU {
        justify-content: center;
    }
    
    .index__align-justify___1P1BC {
        justify-content: space-between;
    }
    
    .index__align-spaced___3aDzY {
        justify-content: space-around;
    }
    
    .index__align-top___2Umf4 {
        align-items: flex-start;
    }
    
    .index__align-self-top___-Yhi2 {
        align-self: flex-start;
    }
    
    .index__align-bottom___3TeiW {
        align-items: flex-end;
    }
    
    .index__align-self-bottom___1aiga {
        align-self: flex-end;
    }
    
    .index__align-middle___2fXo3 {
        align-items: center;
    }
    
    .index__align-self-middle___2Pb_w {
        align-self: center;
    }
    
    .index__align-stretch___F0QT1 {
        align-items: stretch;
    }
    
    .index__align-self-stretch___MrDvv {
        align-self: stretch;
    }
    
    .index__small-order-1___3LIDl {
        order: 1;
    }
    
    .index__small-order-2___w1sUN {
        order: 2;
    }
    
    .index__small-order-3___QOTRM {
        order: 3;
    }
    
    .index__small-order-4___B2JSf {
        order: 4;
    }
    
    .index__small-order-5___3JyDK {
        order: 5;
    }
    
    .index__small-order-6___17mp9 {
        order: 6;
    }
    
    @media print,
    screen and (min-width: 40em) {
        .index__medium-order-1___2W8t4 {
            order: 1;
        }
        .index__medium-order-2___32nLj {
            order: 2;
        }
        .index__medium-order-3___1iwoe {
            order: 3;
        }
        .index__medium-order-4___1tzf0 {
            order: 4;
        }
        .index__medium-order-5___3t8T3 {
            order: 5;
        }
        .index__medium-order-6___1092- {
            order: 6;
        }
    }
    
    @media print,
    screen and (min-width: 64em) {
        .index__large-order-1___2G-yF {
            order: 1;
        }
        .index__large-order-2___25NJp {
            order: 2;
        }
        .index__large-order-3___i7wbH {
            order: 3;
        }
        .index__large-order-4___omwk- {
            order: 4;
        }
        .index__large-order-5___1AiKS {
            order: 5;
        }
        .index__large-order-6___2p6h0 {
            order: 6;
        }
    }
    
    .index__row___1ILk7 {
        max-width: 75rem;
        margin-right: auto;
        margin-left: auto;
        display: flex;
        flex-flow: row wrap;
    }
    
    .index__row___1ILk7 .index__row___1ILk7 {
        margin-right: -0.625rem;
        margin-left: -0.625rem;
    }
    
    @media print,
    screen and (min-width: 40em) {
        .index__row___1ILk7 .index__row___1ILk7 {
            margin-right: -0.9375rem;
            margin-left: -0.9375rem;
        }
    }
    
    @media print,
    screen and (min-width: 64em) {
        .index__row___1ILk7 .index__row___1ILk7 {
            margin-right: -0.9375rem;
            margin-left: -0.9375rem;
        }
    }
    
    .index__row___1ILk7.index__expanded___3xtDO {
        max-width: none;
    }
    
    .index__row___1ILk7.index__collapse___zv9Tv>.index__column___24_Vy,
    .index__row___1ILk7.index__collapse___zv9Tv>.index__columns___3m8WQ {
        padding-right: 0;
        padding-left: 0;
    }
    
    .index__row___1ILk7.index__is-collapse-child___1pfDK,
    .index__row___1ILk7.index__collapse___zv9Tv>.index__column___24_Vy>.index__row___1ILk7,
    .index__row___1ILk7.index__collapse___zv9Tv>.index__columns___3m8WQ>.index__row___1ILk7 {
        margin-right: 0;
        margin-left: 0;
    }
    
    .index__column___24_Vy,
    .index__columns___3m8WQ {
        flex: 1 1 0px;
        padding-right: 0.625rem;
        padding-left: 0.625rem;
        min-width: initial;
    }
    
    @media print,
    screen and (min-width: 40em) {
        .index__column___24_Vy,
        .index__columns___3m8WQ {
            padding-right: 0.9375rem;
            padding-left: 0.9375rem;
        }
    }
    
    .index__column___24_Vy.index__row___1ILk7.index__row___1ILk7,
    .index__row___1ILk7.index__row___1ILk7.index__columns___3m8WQ {
        display: flex;
    }
    
    .index__row___1ILk7 .index__column___24_Vy.index__row___1ILk7.index__row___1ILk7,
    .index__row___1ILk7 .index__row___1ILk7.index__row___1ILk7.index__columns___3m8WQ {
        margin-right: 0;
        margin-left: 0;
        padding-right: 0;
        padding-left: 0;
    }
    
    .index__flex-container___3bAtf {
        display: flex;
    }
    
    .index__flex-child-auto___33XiS {
        flex: 1 1 auto;
    }
    
    .index__flex-child-grow___2nrkp {
        flex: 1 0 auto;
    }
    
    .index__flex-child-shrink___3RTdJ {
        flex: 0 1 auto;
    }
    
    .index__flex-dir-row___HsYF- {
        flex-direction: row;
    }
    
    .index__flex-dir-row-reverse___16K39 {
        flex-direction: row-reverse;
    }
    
    .index__flex-dir-column___Tdx7m {
        flex-direction: column;
    }
    
    .index__flex-dir-column-reverse___2lege {
        flex-direction: column-reverse;
    }
    
    .index__small-1___1U15B {
        flex: 0 0 8.33333%;
        max-width: 8.33333%;
    }
    
    .index__small-offset-0___27MW3 {
        margin-left: 0%;
    }
    
    .index__small-2___n5M9k {
        flex: 0 0 16.66667%;
        max-width: 16.66667%;
    }
    
    .index__small-offset-1___32y_o {
        margin-left: 8.33333%;
    }
    
    .index__small-3___3Qsmm {
        flex: 0 0 25%;
        max-width: 25%;
    }
    
    .index__small-offset-2___31jzW {
        margin-left: 16.66667%;
    }
    
    .index__small-4___1AHpF {
        flex: 0 0 33.33333%;
        max-width: 33.33333%;
    }
    
    .index__small-offset-3___13vlW {
        margin-left: 25%;
    }
    
    .index__small-5___39TDR {
        flex: 0 0 41.66667%;
        max-width: 41.66667%;
    }
    
    .index__small-offset-4___3FU9B {
        margin-left: 33.33333%;
    }
    
    .index__small-6___1b-9e {
        flex: 0 0 50%;
        max-width: 50%;
    }
    
    .index__small-offset-5___2b5Dw {
        margin-left: 41.66667%;
    }
    
    .index__small-7___1i2iR {
        flex: 0 0 58.33333%;
        max-width: 58.33333%;
    }
    
    .index__small-offset-6___ydFor {
        margin-left: 50%;
    }
    
    .index__small-8___3BCpi {
        flex: 0 0 66.66667%;
        max-width: 66.66667%;
    }
    
    .index__small-offset-7___catCV {
        margin-left: 58.33333%;
    }
    
    .index__small-9___8sqHR {
        flex: 0 0 75%;
        max-width: 75%;
    }
    
    .index__small-offset-8___1Yu7j {
        margin-left: 66.66667%;
    }
    
    .index__small-10___1Avjl {
        flex: 0 0 83.33333%;
        max-width: 83.33333%;
    }
    
    .index__small-offset-9___12Ts4 {
        margin-left: 75%;
    }
    
    .index__small-11___172op {
        flex: 0 0 91.66667%;
        max-width: 91.66667%;
    }
    
    .index__small-offset-10___3YU-1 {
        margin-left: 83.33333%;
    }
    
    .index__small-12___QKfVu {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .index__small-offset-11___2OflF {
        margin-left: 91.66667%;
    }
    
    .index__small-order-1___3LIDl {
        order: 1;
    }
    
    .index__small-order-2___w1sUN {
        order: 2;
    }
    
    .index__small-order-3___QOTRM {
        order: 3;
    }
    
    .index__small-order-4___B2JSf {
        order: 4;
    }
    
    .index__small-order-5___3JyDK {
        order: 5;
    }
    
    .index__small-order-6___17mp9 {
        order: 6;
    }
    
    .index__small-up-1___2jjMq {
        flex-wrap: wrap;
    }
    
    .index__small-up-1___2jjMq>.index__column___24_Vy,
    .index__small-up-1___2jjMq>.index__columns___3m8WQ {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .index__small-up-2___3kTXB {
        flex-wrap: wrap;
    }
    
    .index__small-up-2___3kTXB>.index__column___24_Vy,
    .index__small-up-2___3kTXB>.index__columns___3m8WQ {
        flex: 0 0 50%;
        max-width: 50%;
    }
    
    .index__small-up-3___1C2hm {
        flex-wrap: wrap;
    }
    
    .index__small-up-3___1C2hm>.index__column___24_Vy,
    .index__small-up-3___1C2hm>.index__columns___3m8WQ {
        flex: 0 0 33.33333%;
        max-width: 33.33333%;
    }
    
    .index__small-up-4___5UG1H {
        flex-wrap: wrap;
    }
    
    .index__small-up-4___5UG1H>.index__column___24_Vy,
    .index__small-up-4___5UG1H>.index__columns___3m8WQ {
        flex: 0 0 25%;
        max-width: 25%;
    }
    
    .index__small-up-5___196Q8 {
        flex-wrap: wrap;
    }
    
    .index__small-up-5___196Q8>.index__column___24_Vy,
    .index__small-up-5___196Q8>.index__columns___3m8WQ {
        flex: 0 0 20%;
        max-width: 20%;
    }
    
    .index__small-up-6___OI061 {
        flex-wrap: wrap;
    }
    
    .index__small-up-6___OI061>.index__column___24_Vy,
    .index__small-up-6___OI061>.index__columns___3m8WQ {
        flex: 0 0 16.66667%;
        max-width: 16.66667%;
    }
    
    .index__small-up-7___2BY_I {
        flex-wrap: wrap;
    }
    
    .index__small-up-7___2BY_I>.index__column___24_Vy,
    .index__small-up-7___2BY_I>.index__columns___3m8WQ {
        flex: 0 0 14.28571%;
        max-width: 14.28571%;
    }
    
    .index__small-up-8___3zjjK {
        flex-wrap: wrap;
    }
    
    .index__small-up-8___3zjjK>.index__column___24_Vy,
    .index__small-up-8___3zjjK>.index__columns___3m8WQ {
        flex: 0 0 12.5%;
        max-width: 12.5%;
    }
    
    .index__small-collapse___2twzg>.index__column___24_Vy,
    .index__small-collapse___2twzg>.index__columns___3m8WQ {
        padding-right: 0;
        padding-left: 0;
    }
    
    .index__small-uncollapse___3Utb->.index__column___24_Vy,
    .index__small-uncollapse___3Utb->.index__columns___3m8WQ {
        padding-right: 0.625rem;
        padding-left: 0.625rem;
    }
    
    @media print,
    screen and (min-width: 40em) {
        .index__medium-1___UXR_E {
            flex: 0 0 8.33333%;
            max-width: 8.33333%;
        }
        .index__medium-offset-0___31LAJ {
            margin-left: 0%;
        }
        .index__medium-2___3D4lI {
            flex: 0 0 16.66667%;
            max-width: 16.66667%;
        }
        .index__medium-offset-1___2Jwmq {
            margin-left: 8.33333%;
        }
        .index__medium-3___21-79 {
            flex: 0 0 25%;
            max-width: 25%;
        }
        .index__medium-offset-2___2hgBL {
            margin-left: 16.66667%;
        }
        .index__medium-4___32yU4 {
            flex: 0 0 33.33333%;
            max-width: 33.33333%;
        }
        .index__medium-offset-3___2-OXg {
            margin-left: 25%;
        }
        .index__medium-5___2VU1E {
            flex: 0 0 41.66667%;
            max-width: 41.66667%;
        }
        .index__medium-offset-4___dtCYL {
            margin-left: 33.33333%;
        }
        .index__medium-6___1fibw {
            flex: 0 0 50%;
            max-width: 50%;
        }
        .index__medium-offset-5___11S96 {
            margin-left: 41.66667%;
        }
        .index__medium-7___1gHTU {
            flex: 0 0 58.33333%;
            max-width: 58.33333%;
        }
        .index__medium-offset-6___2Dy7R {
            margin-left: 50%;
        }
        .index__medium-8___M1XHY {
            flex: 0 0 66.66667%;
            max-width: 66.66667%;
        }
        .index__medium-offset-7___1ver6 {
            margin-left: 58.33333%;
        }
        .index__medium-9___3DybN {
            flex: 0 0 75%;
            max-width: 75%;
        }
        .index__medium-offset-8___3xw4c {
            margin-left: 66.66667%;
        }
        .index__medium-10____VoMC {
            flex: 0 0 83.33333%;
            max-width: 83.33333%;
        }
        .index__medium-offset-9___8h95U {
            margin-left: 75%;
        }
        .index__medium-11___dYovM {
            flex: 0 0 91.66667%;
            max-width: 91.66667%;
        }
        .index__medium-offset-10___3k3SI {
            margin-left: 83.33333%;
        }
        .index__medium-12___1LFIs {
            flex: 0 0 100%;
            max-width: 100%;
        }
        .index__medium-offset-11___1wT56 {
            margin-left: 91.66667%;
        }
        .index__medium-order-1___2W8t4 {
            order: 1;
        }
        .index__medium-order-2___32nLj {
            order: 2;
        }
        .index__medium-order-3___1iwoe {
            order: 3;
        }
        .index__medium-order-4___1tzf0 {
            order: 4;
        }
        .index__medium-order-5___3t8T3 {
            order: 5;
        }
        .index__medium-order-6___1092- {
            order: 6;
        }
        .index__medium-up-1___27EQX {
            flex-wrap: wrap;
        }
        .index__medium-up-1___27EQX>.index__column___24_Vy,
        .index__medium-up-1___27EQX>.index__columns___3m8WQ {
            flex: 0 0 100%;
            max-width: 100%;
        }
        .index__medium-up-2___3Gykz {
            flex-wrap: wrap;
        }
        .index__medium-up-2___3Gykz>.index__column___24_Vy,
        .index__medium-up-2___3Gykz>.index__columns___3m8WQ {
            flex: 0 0 50%;
            max-width: 50%;
        }
        .index__medium-up-3___3E6vi {
            flex-wrap: wrap;
        }
        .index__medium-up-3___3E6vi>.index__column___24_Vy,
        .index__medium-up-3___3E6vi>.index__columns___3m8WQ {
            flex: 0 0 33.33333%;
            max-width: 33.33333%;
        }
        .index__medium-up-4___iiPjJ {
            flex-wrap: wrap;
        }
        .index__medium-up-4___iiPjJ>.index__column___24_Vy,
        .index__medium-up-4___iiPjJ>.index__columns___3m8WQ {
            flex: 0 0 25%;
            max-width: 25%;
        }
        .index__medium-up-5___1zHA7 {
            flex-wrap: wrap;
        }
        .index__medium-up-5___1zHA7>.index__column___24_Vy,
        .index__medium-up-5___1zHA7>.index__columns___3m8WQ {
            flex: 0 0 20%;
            max-width: 20%;
        }
        .index__medium-up-6___35HVA {
            flex-wrap: wrap;
        }
        .index__medium-up-6___35HVA>.index__column___24_Vy,
        .index__medium-up-6___35HVA>.index__columns___3m8WQ {
            flex: 0 0 16.66667%;
            max-width: 16.66667%;
        }
        .index__medium-up-7___fGr-b {
            flex-wrap: wrap;
        }
        .index__medium-up-7___fGr-b>.index__column___24_Vy,
        .index__medium-up-7___fGr-b>.index__columns___3m8WQ {
            flex: 0 0 14.28571%;
            max-width: 14.28571%;
        }
        .index__medium-up-8___1OPd7 {
            flex-wrap: wrap;
        }
        .index__medium-up-8___1OPd7>.index__column___24_Vy,
        .index__medium-up-8___1OPd7>.index__columns___3m8WQ {
            flex: 0 0 12.5%;
            max-width: 12.5%;
        }
    }
    
    @media print,
    screen and (min-width: 40em) and (min-width: 40em) {
        .index__medium-expand___2ryoM {
            flex: 1 1 0px;
        }
    }
    
    @media print,
    screen and (min-width: 40em) {
        .index__medium-flex-dir-row___2DtRO {
            flex-direction: row;
        }
        .index__medium-flex-dir-row-reverse___2rloY {
            flex-direction: row-reverse;
        }
        .index__medium-flex-dir-column___2bgHI {
            flex-direction: column;
        }
        .index__medium-flex-dir-column-reverse___3OxwA {
            flex-direction: column-reverse;
        }
        .index__medium-flex-child-auto___1f6NY {
            flex: 1 1 auto;
        }
        .index__medium-flex-child-grow___2MT64 {
            flex: 1 0 auto;
        }
        .index__medium-flex-child-shrink___1eQY5 {
            flex: 0 1 auto;
        }
    }
    
    .index__row___1ILk7.index__medium-unstack___3isQA>.index__column___24_Vy,
    .index__row___1ILk7.index__medium-unstack___3isQA>.index__columns___3m8WQ {
        flex: 0 0 100%;
    }
    
    @media print,
    screen and (min-width: 40em) {
        .index__row___1ILk7.index__medium-unstack___3isQA>.index__column___24_Vy,
        .index__row___1ILk7.index__medium-unstack___3isQA>.index__columns___3m8WQ {
            flex: 1 1 0px;
        }
    }
    
    @media print,
    screen and (min-width: 40em) {
        .index__medium-collapse___1ObVv>.index__column___24_Vy,
        .index__medium-collapse___1ObVv>.index__columns___3m8WQ {
            padding-right: 0;
            padding-left: 0;
        }
        .index__medium-uncollapse___OM18E>.index__column___24_Vy,
        .index__medium-uncollapse___OM18E>.index__columns___3m8WQ {
            padding-right: 0.9375rem;
            padding-left: 0.9375rem;
        }
    }
    
    @media print,
    screen and (min-width: 64em) {
        .index__large-1___2fRl- {
            flex: 0 0 8.33333%;
            max-width: 8.33333%;
        }
        .index__large-offset-0___1H_BL {
            margin-left: 0%;
        }
        .index__large-2___2sRqB {
            flex: 0 0 16.66667%;
            max-width: 16.66667%;
        }
        .index__large-offset-1___2k1IP {
            margin-left: 8.33333%;
        }
        .index__large-3___32Eli {
            flex: 0 0 25%;
            max-width: 25%;
        }
        .index__large-offset-2___3QjlV {
            margin-left: 16.66667%;
        }
        .index__large-4___2om4G {
            flex: 0 0 33.33333%;
            max-width: 33.33333%;
        }
        .index__large-offset-3___5tlCV {
            margin-left: 25%;
        }
        .index__large-5___2vj4n {
            flex: 0 0 41.66667%;
            max-width: 41.66667%;
        }
        .index__large-offset-4___1EKi5 {
            margin-left: 33.33333%;
        }
        .index__large-6___1zuGy {
            flex: 0 0 50%;
            max-width: 50%;
        }
        .index__large-offset-5___3BaiN {
            margin-left: 41.66667%;
        }
        .index__large-7___2KVj8 {
            flex: 0 0 58.33333%;
            max-width: 58.33333%;
        }
        .index__large-offset-6___1Z-Sf {
            margin-left: 50%;
        }
        .index__large-8___1TBpz {
            flex: 0 0 66.66667%;
            max-width: 66.66667%;
        }
        .index__large-offset-7___1VCBh {
            margin-left: 58.33333%;
        }
        .index__large-9___TgK1r {
            flex: 0 0 75%;
            max-width: 75%;
        }
        .index__large-offset-8___2_GfH {
            margin-left: 66.66667%;
        }
        .index__large-10___2sr5_ {
            flex: 0 0 83.33333%;
            max-width: 83.33333%;
        }
        .index__large-offset-9___1cI3A {
            margin-left: 75%;
        }
        .index__large-11___ThaUI {
            flex: 0 0 91.66667%;
            max-width: 91.66667%;
        }
        .index__large-offset-10___AjLDo {
            margin-left: 83.33333%;
        }
        .index__large-12___2ztTs {
            flex: 0 0 100%;
            max-width: 100%;
        }
        .index__large-offset-11___30xAW {
            margin-left: 91.66667%;
        }
        .index__large-order-1___2G-yF {
            order: 1;
        }
        .index__large-order-2___25NJp {
            order: 2;
        }
        .index__large-order-3___i7wbH {
            order: 3;
        }
        .index__large-order-4___omwk- {
            order: 4;
        }
        .index__large-order-5___1AiKS {
            order: 5;
        }
        .index__large-order-6___2p6h0 {
            order: 6;
        }
        .index__large-up-1___1FP-j {
            flex-wrap: wrap;
        }
        .index__large-up-1___1FP-j>.index__column___24_Vy,
        .index__large-up-1___1FP-j>.index__columns___3m8WQ {
            flex: 0 0 100%;
            max-width: 100%;
        }
        .index__large-up-2___2QgYI {
            flex-wrap: wrap;
        }
        .index__large-up-2___2QgYI>.index__column___24_Vy,
        .index__large-up-2___2QgYI>.index__columns___3m8WQ {
            flex: 0 0 50%;
            max-width: 50%;
        }
        .index__large-up-3___18TH- {
            flex-wrap: wrap;
        }
        .index__large-up-3___18TH->.index__column___24_Vy,
        .index__large-up-3___18TH->.index__columns___3m8WQ {
            flex: 0 0 33.33333%;
            max-width: 33.33333%;
        }
        .index__large-up-4___1_vg1 {
            flex-wrap: wrap;
        }
        .index__large-up-4___1_vg1>.index__column___24_Vy,
        .index__large-up-4___1_vg1>.index__columns___3m8WQ {
            flex: 0 0 25%;
            max-width: 25%;
        }
        .index__large-up-5___2Add0 {
            flex-wrap: wrap;
        }
        .index__large-up-5___2Add0>.index__column___24_Vy,
        .index__large-up-5___2Add0>.index__columns___3m8WQ {
            flex: 0 0 20%;
            max-width: 20%;
        }
        .index__large-up-6___1hVvD {
            flex-wrap: wrap;
        }
        .index__large-up-6___1hVvD>.index__column___24_Vy,
        .index__large-up-6___1hVvD>.index__columns___3m8WQ {
            flex: 0 0 16.66667%;
            max-width: 16.66667%;
        }
        .index__large-up-7___1KXfQ {
            flex-wrap: wrap;
        }
        .index__large-up-7___1KXfQ>.index__column___24_Vy,
        .index__large-up-7___1KXfQ>.index__columns___3m8WQ {
            flex: 0 0 14.28571%;
            max-width: 14.28571%;
        }
        .index__large-up-8___3HdIN {
            flex-wrap: wrap;
        }
        .index__large-up-8___3HdIN>.index__column___24_Vy,
        .index__large-up-8___3HdIN>.index__columns___3m8WQ {
            flex: 0 0 12.5%;
            max-width: 12.5%;
        }
    }
    
    @media print,
    screen and (min-width: 64em) and (min-width: 64em) {
        .index__large-expand___BttUa {
            flex: 1 1 0px;
        }
    }
    
    @media print,
    screen and (min-width: 64em) {
        .index__large-flex-dir-row___2yK7f {
            flex-direction: row;
        }
        .index__large-flex-dir-row-reverse___1rc53 {
            flex-direction: row-reverse;
        }
        .index__large-flex-dir-column___1UqbO {
            flex-direction: column;
        }
        .index__large-flex-dir-column-reverse____Q8rx {
            flex-direction: column-reverse;
        }
        .index__large-flex-child-auto___3rMtJ {
            flex: 1 1 auto;
        }
        .index__large-flex-child-grow___1PihJ {
            flex: 1 0 auto;
        }
        .index__large-flex-child-shrink___1v5vm {
            flex: 0 1 auto;
        }
    }
    
    .index__row___1ILk7.index__large-unstack___2N4et>.index__column___24_Vy,
    .index__row___1ILk7.index__large-unstack___2N4et>.index__columns___3m8WQ {
        flex: 0 0 100%;
    }
    
    @media print,
    screen and (min-width: 64em) {
        .index__row___1ILk7.index__large-unstack___2N4et>.index__column___24_Vy,
        .index__row___1ILk7.index__large-unstack___2N4et>.index__columns___3m8WQ {
            flex: 1 1 0px;
        }
    }
    
    @media print,
    screen and (min-width: 64em) {
        .index__large-collapse___13YUN>.index__column___24_Vy,
        .index__large-collapse___13YUN>.index__columns___3m8WQ {
            padding-right: 0;
            padding-left: 0;
        }
        .index__large-uncollapse___hwQA->.index__column___24_Vy,
        .index__large-uncollapse___hwQA->.index__columns___3m8WQ {
            padding-right: 0.9375rem;
            padding-left: 0.9375rem;
        }
    }
    
    .index__shrink___3DDFF {
        flex: 0 0 auto;
        max-width: 100%;
    }
    
    .index__align-right___2mklA {
        justify-content: flex-end;
    }
    
    .index__align-center___2McEU {
        justify-content: center;
    }
    
    .index__align-justify___1P1BC {
        justify-content: space-between;
    }
    
    .index__align-spaced___3aDzY {
        justify-content: space-around;
    }
    
    .index__align-top___2Umf4 {
        align-items: flex-start;
    }
    
    .index__align-self-top___-Yhi2 {
        align-self: flex-start;
    }
    
    .index__align-bottom___3TeiW {
        align-items: flex-end;
    }
    
    .index__align-self-bottom___1aiga {
        align-self: flex-end;
    }
    
    .index__align-middle___2fXo3 {
        align-items: center;
    }
    
    .index__align-self-middle___2Pb_w {
        align-self: center;
    }
    
    .index__align-stretch___F0QT1 {
        align-items: stretch;
    }
    
    .index__align-self-stretch___MrDvv {
        align-self: stretch;
    }
    
    .index__small-order-1___3LIDl {
        order: 1;
    }
    
    .index__small-order-2___w1sUN {
        order: 2;
    }
    
    .index__small-order-3___QOTRM {
        order: 3;
    }
    
    .index__small-order-4___B2JSf {
        order: 4;
    }
    
    .index__small-order-5___3JyDK {
        order: 5;
    }
    
    .index__small-order-6___17mp9 {
        order: 6;
    }
    
    @media print,
    screen and (min-width: 40em) {
        .index__medium-order-1___2W8t4 {
            order: 1;
        }
        .index__medium-order-2___32nLj {
            order: 2;
        }
        .index__medium-order-3___1iwoe {
            order: 3;
        }
        .index__medium-order-4___1tzf0 {
            order: 4;
        }
        .index__medium-order-5___3t8T3 {
            order: 5;
        }
        .index__medium-order-6___1092- {
            order: 6;
        }
    }
    
    @media print,
    screen and (min-width: 64em) {
        .index__large-order-1___2G-yF {
            order: 1;
        }
        .index__large-order-2___25NJp {
            order: 2;
        }
        .index__large-order-3___i7wbH {
            order: 3;
        }
        .index__large-order-4___omwk- {
            order: 4;
        }
        .index__large-order-5___1AiKS {
            order: 5;
        }
        .index__large-order-6___2p6h0 {
            order: 6;
        }
    }
    
    .index__row___1ILk7 {
        max-width: 75rem;
        margin-right: auto;
        margin-left: auto;
        display: flex;
        flex-flow: row wrap;
    }
    
    .index__row___1ILk7 .index__row___1ILk7 {
        margin-right: -0.625rem;
        margin-left: -0.625rem;
    }
    
    @media print,
    screen and (min-width: 40em) {
        .index__row___1ILk7 .index__row___1ILk7 {
            margin-right: -0.9375rem;
            margin-left: -0.9375rem;
        }
    }
    
    @media print,
    screen and (min-width: 64em) {
        .index__row___1ILk7 .index__row___1ILk7 {
            margin-right: -0.9375rem;
            margin-left: -0.9375rem;
        }
    }
    
    .index__row___1ILk7.index__expanded___3xtDO {
        max-width: none;
    }
    
    .index__row___1ILk7.index__collapse___zv9Tv>.index__column___24_Vy,
    .index__row___1ILk7.index__collapse___zv9Tv>.index__columns___3m8WQ {
        padding-right: 0;
        padding-left: 0;
    }
    
    .index__row___1ILk7.index__is-collapse-child___1pfDK,
    .index__row___1ILk7.index__collapse___zv9Tv>.index__column___24_Vy>.index__row___1ILk7,
    .index__row___1ILk7.index__collapse___zv9Tv>.index__columns___3m8WQ>.index__row___1ILk7 {
        margin-right: 0;
        margin-left: 0;
    }
    
    .index__column___24_Vy,
    .index__columns___3m8WQ {
        flex: 1 1 0px;
        padding-right: 0.625rem;
        padding-left: 0.625rem;
        min-width: initial;
    }
    
    @media print,
    screen and (min-width: 40em) {
        .index__column___24_Vy,
        .index__columns___3m8WQ {
            padding-right: 0.9375rem;
            padding-left: 0.9375rem;
        }
    }
    
    .index__column___24_Vy.index__row___1ILk7.index__row___1ILk7,
    .index__row___1ILk7.index__row___1ILk7.index__columns___3m8WQ {
        display: flex;
    }
    
    .index__row___1ILk7 .index__column___24_Vy.index__row___1ILk7.index__row___1ILk7,
    .index__row___1ILk7 .index__row___1ILk7.index__row___1ILk7.index__columns___3m8WQ {
        margin-right: 0;
        margin-left: 0;
        padding-right: 0;
        padding-left: 0;
    }
    
    .index__flex-container___3bAtf {
        display: flex;
    }
    
    .index__flex-child-auto___33XiS {
        flex: 1 1 auto;
    }
    
    .index__flex-child-grow___2nrkp {
        flex: 1 0 auto;
    }
    
    .index__flex-child-shrink___3RTdJ {
        flex: 0 1 auto;
    }
    
    .index__flex-dir-row___HsYF- {
        flex-direction: row;
    }
    
    .index__flex-dir-row-reverse___16K39 {
        flex-direction: row-reverse;
    }
    
    .index__flex-dir-column___Tdx7m {
        flex-direction: column;
    }
    
    .index__flex-dir-column-reverse___2lege {
        flex-direction: column-reverse;
    }
    
    .index__small-1___1U15B {
        flex: 0 0 8.33333%;
        max-width: 8.33333%;
    }
    
    .index__small-offset-0___27MW3 {
        margin-left: 0%;
    }
    
    .index__small-2___n5M9k {
        flex: 0 0 16.66667%;
        max-width: 16.66667%;
    }
    
    .index__small-offset-1___32y_o {
        margin-left: 8.33333%;
    }
    
    .index__small-3___3Qsmm {
        flex: 0 0 25%;
        max-width: 25%;
    }
    
    .index__small-offset-2___31jzW {
        margin-left: 16.66667%;
    }
    
    .index__small-4___1AHpF {
        flex: 0 0 33.33333%;
        max-width: 33.33333%;
    }
    
    .index__small-offset-3___13vlW {
        margin-left: 25%;
    }
    
    .index__small-5___39TDR {
        flex: 0 0 41.66667%;
        max-width: 41.66667%;
    }
    
    .index__small-offset-4___3FU9B {
        margin-left: 33.33333%;
    }
    
    .index__small-6___1b-9e {
        flex: 0 0 50%;
        max-width: 50%;
    }
    
    .index__small-offset-5___2b5Dw {
        margin-left: 41.66667%;
    }
    
    .index__small-7___1i2iR {
        flex: 0 0 58.33333%;
        max-width: 58.33333%;
    }
    
    .index__small-offset-6___ydFor {
        margin-left: 50%;
    }
    
    .index__small-8___3BCpi {
        flex: 0 0 66.66667%;
        max-width: 66.66667%;
    }
    
    .index__small-offset-7___catCV {
        margin-left: 58.33333%;
    }
    
    .index__small-9___8sqHR {
        flex: 0 0 75%;
        max-width: 75%;
    }
    
    .index__small-offset-8___1Yu7j {
        margin-left: 66.66667%;
    }
    
    .index__small-10___1Avjl {
        flex: 0 0 83.33333%;
        max-width: 83.33333%;
    }
    
    .index__small-offset-9___12Ts4 {
        margin-left: 75%;
    }
    
    .index__small-11___172op {
        flex: 0 0 91.66667%;
        max-width: 91.66667%;
    }
    
    .index__small-offset-10___3YU-1 {
        margin-left: 83.33333%;
    }
    
    .index__small-12___QKfVu {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .index__small-offset-11___2OflF {
        margin-left: 91.66667%;
    }
    
    .index__small-order-1___3LIDl {
        order: 1;
    }
    
    .index__small-order-2___w1sUN {
        order: 2;
    }
    
    .index__small-order-3___QOTRM {
        order: 3;
    }
    
    .index__small-order-4___B2JSf {
        order: 4;
    }
    
    .index__small-order-5___3JyDK {
        order: 5;
    }
    
    .index__small-order-6___17mp9 {
        order: 6;
    }
    
    .index__small-up-1___2jjMq {
        flex-wrap: wrap;
    }
    
    .index__small-up-1___2jjMq>.index__column___24_Vy,
    .index__small-up-1___2jjMq>.index__columns___3m8WQ {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .index__small-up-2___3kTXB {
        flex-wrap: wrap;
    }
    
    .index__small-up-2___3kTXB>.index__column___24_Vy,
    .index__small-up-2___3kTXB>.index__columns___3m8WQ {
        flex: 0 0 50%;
        max-width: 50%;
    }
    
    .index__small-up-3___1C2hm {
        flex-wrap: wrap;
    }
    
    .index__small-up-3___1C2hm>.index__column___24_Vy,
    .index__small-up-3___1C2hm>.index__columns___3m8WQ {
        flex: 0 0 33.33333%;
        max-width: 33.33333%;
    }
    
    .index__small-up-4___5UG1H {
        flex-wrap: wrap;
    }
    
    .index__small-up-4___5UG1H>.index__column___24_Vy,
    .index__small-up-4___5UG1H>.index__columns___3m8WQ {
        flex: 0 0 25%;
        max-width: 25%;
    }
    
    .index__small-up-5___196Q8 {
        flex-wrap: wrap;
    }
    
    .index__small-up-5___196Q8>.index__column___24_Vy,
    .index__small-up-5___196Q8>.index__columns___3m8WQ {
        flex: 0 0 20%;
        max-width: 20%;
    }
    
    .index__small-up-6___OI061 {
        flex-wrap: wrap;
    }
    
    .index__small-up-6___OI061>.index__column___24_Vy,
    .index__small-up-6___OI061>.index__columns___3m8WQ {
        flex: 0 0 16.66667%;
        max-width: 16.66667%;
    }
    
    .index__small-up-7___2BY_I {
        flex-wrap: wrap;
    }
    
    .index__small-up-7___2BY_I>.index__column___24_Vy,
    .index__small-up-7___2BY_I>.index__columns___3m8WQ {
        flex: 0 0 14.28571%;
        max-width: 14.28571%;
    }
    
    .index__small-up-8___3zjjK {
        flex-wrap: wrap;
    }
    
    .index__small-up-8___3zjjK>.index__column___24_Vy,
    .index__small-up-8___3zjjK>.index__columns___3m8WQ {
        flex: 0 0 12.5%;
        max-width: 12.5%;
    }
    
    .index__small-collapse___2twzg>.index__column___24_Vy,
    .index__small-collapse___2twzg>.index__columns___3m8WQ {
        padding-right: 0;
        padding-left: 0;
    }
    
    .index__small-uncollapse___3Utb->.index__column___24_Vy,
    .index__small-uncollapse___3Utb->.index__columns___3m8WQ {
        padding-right: 0.625rem;
        padding-left: 0.625rem;
    }
    
    @media print,
    screen and (min-width: 40em) {
        .index__medium-1___UXR_E {
            flex: 0 0 8.33333%;
            max-width: 8.33333%;
        }
        .index__medium-offset-0___31LAJ {
            margin-left: 0%;
        }
        .index__medium-2___3D4lI {
            flex: 0 0 16.66667%;
            max-width: 16.66667%;
        }
        .index__medium-offset-1___2Jwmq {
            margin-left: 8.33333%;
        }
        .index__medium-3___21-79 {
            flex: 0 0 25%;
            max-width: 25%;
        }
        .index__medium-offset-2___2hgBL {
            margin-left: 16.66667%;
        }
        .index__medium-4___32yU4 {
            flex: 0 0 33.33333%;
            max-width: 33.33333%;
        }
        .index__medium-offset-3___2-OXg {
            margin-left: 25%;
        }
        .index__medium-5___2VU1E {
            flex: 0 0 41.66667%;
            max-width: 41.66667%;
        }
        .index__medium-offset-4___dtCYL {
            margin-left: 33.33333%;
        }
        .index__medium-6___1fibw {
            flex: 0 0 50%;
            max-width: 50%;
        }
        .index__medium-offset-5___11S96 {
            margin-left: 41.66667%;
        }
        .index__medium-7___1gHTU {
            flex: 0 0 58.33333%;
            max-width: 58.33333%;
        }
        .index__medium-offset-6___2Dy7R {
            margin-left: 50%;
        }
        .index__medium-8___M1XHY {
            flex: 0 0 66.66667%;
            max-width: 66.66667%;
        }
        .index__medium-offset-7___1ver6 {
            margin-left: 58.33333%;
        }
        .index__medium-9___3DybN {
            flex: 0 0 75%;
            max-width: 75%;
        }
        .index__medium-offset-8___3xw4c {
            margin-left: 66.66667%;
        }
        .index__medium-10____VoMC {
            flex: 0 0 83.33333%;
            max-width: 83.33333%;
        }
        .index__medium-offset-9___8h95U {
            margin-left: 75%;
        }
        .index__medium-11___dYovM {
            flex: 0 0 91.66667%;
            max-width: 91.66667%;
        }
        .index__medium-offset-10___3k3SI {
            margin-left: 83.33333%;
        }
        .index__medium-12___1LFIs {
            flex: 0 0 100%;
            max-width: 100%;
        }
        .index__medium-offset-11___1wT56 {
            margin-left: 91.66667%;
        }
        .index__medium-order-1___2W8t4 {
            order: 1;
        }
        .index__medium-order-2___32nLj {
            order: 2;
        }
        .index__medium-order-3___1iwoe {
            order: 3;
        }
        .index__medium-order-4___1tzf0 {
            order: 4;
        }
        .index__medium-order-5___3t8T3 {
            order: 5;
        }
        .index__medium-order-6___1092- {
            order: 6;
        }
        .index__medium-up-1___27EQX {
            flex-wrap: wrap;
        }
        .index__medium-up-1___27EQX>.index__column___24_Vy,
        .index__medium-up-1___27EQX>.index__columns___3m8WQ {
            flex: 0 0 100%;
            max-width: 100%;
        }
        .index__medium-up-2___3Gykz {
            flex-wrap: wrap;
        }
        .index__medium-up-2___3Gykz>.index__column___24_Vy,
        .index__medium-up-2___3Gykz>.index__columns___3m8WQ {
            flex: 0 0 50%;
            max-width: 50%;
        }
        .index__medium-up-3___3E6vi {
            flex-wrap: wrap;
        }
        .index__medium-up-3___3E6vi>.index__column___24_Vy,
        .index__medium-up-3___3E6vi>.index__columns___3m8WQ {
            flex: 0 0 33.33333%;
            max-width: 33.33333%;
        }
        .index__medium-up-4___iiPjJ {
            flex-wrap: wrap;
        }
        .index__medium-up-4___iiPjJ>.index__column___24_Vy,
        .index__medium-up-4___iiPjJ>.index__columns___3m8WQ {
            flex: 0 0 25%;
            max-width: 25%;
        }
        .index__medium-up-5___1zHA7 {
            flex-wrap: wrap;
        }
        .index__medium-up-5___1zHA7>.index__column___24_Vy,
        .index__medium-up-5___1zHA7>.index__columns___3m8WQ {
            flex: 0 0 20%;
            max-width: 20%;
        }
        .index__medium-up-6___35HVA {
            flex-wrap: wrap;
        }
        .index__medium-up-6___35HVA>.index__column___24_Vy,
        .index__medium-up-6___35HVA>.index__columns___3m8WQ {
            flex: 0 0 16.66667%;
            max-width: 16.66667%;
        }
        .index__medium-up-7___fGr-b {
            flex-wrap: wrap;
        }
        .index__medium-up-7___fGr-b>.index__column___24_Vy,
        .index__medium-up-7___fGr-b>.index__columns___3m8WQ {
            flex: 0 0 14.28571%;
            max-width: 14.28571%;
        }
        .index__medium-up-8___1OPd7 {
            flex-wrap: wrap;
        }
        .index__medium-up-8___1OPd7>.index__column___24_Vy,
        .index__medium-up-8___1OPd7>.index__columns___3m8WQ {
            flex: 0 0 12.5%;
            max-width: 12.5%;
        }
    }
    
    @media print,
    screen and (min-width: 40em) and (min-width: 40em) {
        .index__medium-expand___2ryoM {
            flex: 1 1 0px;
        }
    }
    
    @media print,
    screen and (min-width: 40em) {
        .index__medium-flex-dir-row___2DtRO {
            flex-direction: row;
        }
        .index__medium-flex-dir-row-reverse___2rloY {
            flex-direction: row-reverse;
        }
        .index__medium-flex-dir-column___2bgHI {
            flex-direction: column;
        }
        .index__medium-flex-dir-column-reverse___3OxwA {
            flex-direction: column-reverse;
        }
        .index__medium-flex-child-auto___1f6NY {
            flex: 1 1 auto;
        }
        .index__medium-flex-child-grow___2MT64 {
            flex: 1 0 auto;
        }
        .index__medium-flex-child-shrink___1eQY5 {
            flex: 0 1 auto;
        }
    }
    
    .index__row___1ILk7.index__medium-unstack___3isQA>.index__column___24_Vy,
    .index__row___1ILk7.index__medium-unstack___3isQA>.index__columns___3m8WQ {
        flex: 0 0 100%;
    }
    
    @media print,
    screen and (min-width: 40em) {
        .index__row___1ILk7.index__medium-unstack___3isQA>.index__column___24_Vy,
        .index__row___1ILk7.index__medium-unstack___3isQA>.index__columns___3m8WQ {
            flex: 1 1 0px;
        }
    }
    
    @media print,
    screen and (min-width: 40em) {
        .index__medium-collapse___1ObVv>.index__column___24_Vy,
        .index__medium-collapse___1ObVv>.index__columns___3m8WQ {
            padding-right: 0;
            padding-left: 0;
        }
        .index__medium-uncollapse___OM18E>.index__column___24_Vy,
        .index__medium-uncollapse___OM18E>.index__columns___3m8WQ {
            padding-right: 0.9375rem;
            padding-left: 0.9375rem;
        }
    }
    
    @media print,
    screen and (min-width: 64em) {
        .index__large-1___2fRl- {
            flex: 0 0 8.33333%;
            max-width: 8.33333%;
        }
        .index__large-offset-0___1H_BL {
            margin-left: 0%;
        }
        .index__large-2___2sRqB {
            flex: 0 0 16.66667%;
            max-width: 16.66667%;
        }
        .index__large-offset-1___2k1IP {
            margin-left: 8.33333%;
        }
        .index__large-3___32Eli {
            flex: 0 0 25%;
            max-width: 25%;
        }
        .index__large-offset-2___3QjlV {
            margin-left: 16.66667%;
        }
        .index__large-4___2om4G {
            flex: 0 0 33.33333%;
            max-width: 33.33333%;
        }
        .index__large-offset-3___5tlCV {
            margin-left: 25%;
        }
        .index__large-5___2vj4n {
            flex: 0 0 41.66667%;
            max-width: 41.66667%;
        }
        .index__large-offset-4___1EKi5 {
            margin-left: 33.33333%;
        }
        .index__large-6___1zuGy {
            flex: 0 0 50%;
            max-width: 50%;
        }
        .index__large-offset-5___3BaiN {
            margin-left: 41.66667%;
        }
        .index__large-7___2KVj8 {
            flex: 0 0 58.33333%;
            max-width: 58.33333%;
        }
        .index__large-offset-6___1Z-Sf {
            margin-left: 50%;
        }
        .index__large-8___1TBpz {
            flex: 0 0 66.66667%;
            max-width: 66.66667%;
        }
        .index__large-offset-7___1VCBh {
            margin-left: 58.33333%;
        }
        .index__large-9___TgK1r {
            flex: 0 0 75%;
            max-width: 75%;
        }
        .index__large-offset-8___2_GfH {
            margin-left: 66.66667%;
        }
        .index__large-10___2sr5_ {
            flex: 0 0 83.33333%;
            max-width: 83.33333%;
        }
        .index__large-offset-9___1cI3A {
            margin-left: 75%;
        }
        .index__large-11___ThaUI {
            flex: 0 0 91.66667%;
            max-width: 91.66667%;
        }
        .index__large-offset-10___AjLDo {
            margin-left: 83.33333%;
        }
        .index__large-12___2ztTs {
            flex: 0 0 100%;
            max-width: 100%;
        }
        .index__large-offset-11___30xAW {
            margin-left: 91.66667%;
        }
        .index__large-order-1___2G-yF {
            order: 1;
        }
        .index__large-order-2___25NJp {
            order: 2;
        }
        .index__large-order-3___i7wbH {
            order: 3;
        }
        .index__large-order-4___omwk- {
            order: 4;
        }
        .index__large-order-5___1AiKS {
            order: 5;
        }
        .index__large-order-6___2p6h0 {
            order: 6;
        }
        .index__large-up-1___1FP-j {
            flex-wrap: wrap;
        }
        .index__large-up-1___1FP-j>.index__column___24_Vy,
        .index__large-up-1___1FP-j>.index__columns___3m8WQ {
            flex: 0 0 100%;
            max-width: 100%;
        }
        .index__large-up-2___2QgYI {
            flex-wrap: wrap;
        }
        .index__large-up-2___2QgYI>.index__column___24_Vy,
        .index__large-up-2___2QgYI>.index__columns___3m8WQ {
            flex: 0 0 50%;
            max-width: 50%;
        }
        .index__large-up-3___18TH- {
            flex-wrap: wrap;
        }
        .index__large-up-3___18TH->.index__column___24_Vy,
        .index__large-up-3___18TH->.index__columns___3m8WQ {
            flex: 0 0 33.33333%;
            max-width: 33.33333%;
        }
        .index__large-up-4___1_vg1 {
            flex-wrap: wrap;
        }
        .index__large-up-4___1_vg1>.index__column___24_Vy,
        .index__large-up-4___1_vg1>.index__columns___3m8WQ {
            flex: 0 0 25%;
            max-width: 25%;
        }
        .index__large-up-5___2Add0 {
            flex-wrap: wrap;
        }
        .index__large-up-5___2Add0>.index__column___24_Vy,
        .index__large-up-5___2Add0>.index__columns___3m8WQ {
            flex: 0 0 20%;
            max-width: 20%;
        }
        .index__large-up-6___1hVvD {
            flex-wrap: wrap;
        }
        .index__large-up-6___1hVvD>.index__column___24_Vy,
        .index__large-up-6___1hVvD>.index__columns___3m8WQ {
            flex: 0 0 16.66667%;
            max-width: 16.66667%;
        }
        .index__large-up-7___1KXfQ {
            flex-wrap: wrap;
        }
        .index__large-up-7___1KXfQ>.index__column___24_Vy,
        .index__large-up-7___1KXfQ>.index__columns___3m8WQ {
            flex: 0 0 14.28571%;
            max-width: 14.28571%;
        }
        .index__large-up-8___3HdIN {
            flex-wrap: wrap;
        }
        .index__large-up-8___3HdIN>.index__column___24_Vy,
        .index__large-up-8___3HdIN>.index__columns___3m8WQ {
            flex: 0 0 12.5%;
            max-width: 12.5%;
        }
    }
    
    @media print,
    screen and (min-width: 64em) and (min-width: 64em) {
        .index__large-expand___BttUa {
            flex: 1 1 0px;
        }
    }
    
    @media print,
    screen and (min-width: 64em) {
        .index__large-flex-dir-row___2yK7f {
            flex-direction: row;
        }
        .index__large-flex-dir-row-reverse___1rc53 {
            flex-direction: row-reverse;
        }
        .index__large-flex-dir-column___1UqbO {
            flex-direction: column;
        }
        .index__large-flex-dir-column-reverse____Q8rx {
            flex-direction: column-reverse;
        }
        .index__large-flex-child-auto___3rMtJ {
            flex: 1 1 auto;
        }
        .index__large-flex-child-grow___1PihJ {
            flex: 1 0 auto;
        }
        .index__large-flex-child-shrink___1v5vm {
            flex: 0 1 auto;
        }
    }
    
    .index__row___1ILk7.index__large-unstack___2N4et>.index__column___24_Vy,
    .index__row___1ILk7.index__large-unstack___2N4et>.index__columns___3m8WQ {
        flex: 0 0 100%;
    }
    
    @media print,
    screen and (min-width: 64em) {
        .index__row___1ILk7.index__large-unstack___2N4et>.index__column___24_Vy,
        .index__row___1ILk7.index__large-unstack___2N4et>.index__columns___3m8WQ {
            flex: 1 1 0px;
        }
    }
    
    @media print,
    screen and (min-width: 64em) {
        .index__large-collapse___13YUN>.index__column___24_Vy,
        .index__large-collapse___13YUN>.index__columns___3m8WQ {
            padding-right: 0;
            padding-left: 0;
        }
        .index__large-uncollapse___hwQA->.index__column___24_Vy,
        .index__large-uncollapse___hwQA->.index__columns___3m8WQ {
            padding-right: 0.9375rem;
            padding-left: 0.9375rem;
        }
    }
    
    .index__shrink___3DDFF {
        flex: 0 0 auto;
        max-width: 100%;
    }
</style>
<div>
    <div style="background:#f9f9f9;border:solid 1px #c6c6c6;font-size:11px;line-height:2rem;margin-bottom:1.5rem;margin-left:0;margin-right:0;" class="index__row___1ILk7">
        <div style="background:#eee;outline:solid 1px #ccc;" class="index__columns___3m8WQ index__small-4___1AHpF">4 columns</div>
        <div class="index__columns___3m8WQ">Whatever&quot;s left!</div>
    </div>
    <div style="background:#f9f9f9;border:solid 1px #c6c6c6;font-size:11px;line-height:2rem;margin-bottom:1.5rem;margin-left:0;margin-right:0;" class="index__row___1ILk7">
        <div style="background:#eee;outline:solid 1px #ccc;" class="index__columns___3m8WQ index__small-4___1AHpF">4 columns</div>
        <div style="background:#eee;outline:solid 1px #ccc;" class="index__columns___3m8WQ index__small-4___1AHpF">4 columns</div>
        <div class="index__columns___3m8WQ">Whatever&quot;s left!</div>
    </div>
    <div style="background:#f9f9f9;border:solid 1px #c6c6c6;font-size:11px;line-height:2rem;margin-bottom:1.5rem;margin-left:0;margin-right:0;" class="index__row___1ILk7">
        <div style="background:#eee;outline:solid 1px #ccc;" class="index__columns___3m8WQ">Shrink!</div>
        <div style="background:#eee;outline:solid 1px #ccc;" class="index__columns___3m8WQ">Expand!</div>
    </div>
</div>


        import React from 'react';
import FlexGrid from 'fain/general/FlexGrid';

const { Col, Row } = FlexGrid;

export default function FlexGridExample(props) {
  const { colStyle, rowStyle } = props;
  return (
    <div>

      <Row style={rowStyle}>
        <Col size={{ small: 4 }} style={colStyle}>4 columns</Col>
        <Col>Whatever&quot;s left!</Col>
      </Row>

      <Row style={rowStyle}>
        <Col size={{ small: 4 }} style={colStyle}>4 columns</Col>
        <Col size={{ small: 4 }} style={colStyle}>4 columns</Col>
        <Col>Whatever&quot;s left!</Col>
      </Row>

      <Row style={rowStyle}>
        <Col shrink style={colStyle}>Shrink!</Col>
        <Col style={colStyle}>Expand!</Col>
      </Row>

    </div>
  );
}


        {
  "colStyle": {
    "background": "#eee",
    "outline": "solid 1px #ccc"
  },
  "rowStyle": {
    "background": "#f9f9f9",
    "border": "solid 1px #c6c6c6",
    "fontSize": "11px",
    "lineHeight": "2rem",
    "marginBottom": "1.5rem",
    "marginLeft": 0,
    "marginRight": 0
  }
}

File:

Content:


                                // @flow

import classNames from 'classnames';
import React from 'react';

import styles from './index.scss';

type Props = {
  alignSelf?: 'bottom' | 'middle' | 'top',
  className: ClassName,
  offset?: Object,
  order?: Object,
  size?: Object,
};

function getAlignSelfClassName(alignSelf) {
  if (!alignSelf) { return null; }
  return styles[`align-self-${alignSelf}`];
}

function getOffsetClassName(offset) {
  if (!offset) { return null; }
  return Object.keys(offset).map(name => styles[`${name}-offset-${offset[name]}`]);
}

function getOrderClassName(order) {
  if (!order) { return null; }
  return Object.keys(order).map(name => styles[`${name}-order-${order[name]}`]);
}

function getSizeClassName(size) {
  if (!size) { return null; }
  return Object.keys(size).map(name => styles[`${name}-${size[name]}`]);
}

function FlexGridCol(props: Props) {
  const { alignSelf, offset, order, size, ...other } = props;
  const colClassName = classNames(
    props.className,
    styles.columns,
    getAlignSelfClassName(alignSelf),
    getOffsetClassName(offset),
    getOrderClassName(order),
    getSizeClassName(size),
  );

  return (
    <div
      {...other}
      className={colClassName}
    />
  );
}

export default FlexGridCol;

URL: /components/raw/flexgrid/Col.jsx
Filesystem Path: src/general/FlexGrid/Col.jsx
Size: 1.2 KB

Content:


                                // @flow

import classNames from 'classnames';
import React from 'react';

import styles from './index.scss';

type Props = {
  align?: string,
  collapse?: Array<string>,
  className: ClassName,
  sizeUp?: Object,
  uncollapse?: Array<string>,
  unstack?: Array<string>,
};

function getAlignClassName(align) {
  if (!align) { return null; }
  return styles[`align-${align}`];
}

function getCollapseClassName(collapse) {
  if (!collapse) { return null; }
  return collapse.map(size => styles[`${size}-collapse`]);
}

function getSizeUpClassName(sizeUp) {
  if (!sizeUp) { return null; }
  return Object.keys(sizeUp).map(name => styles[`${name}-up-${sizeUp[name]}`]);
}

function getUncollapseClassName(collapse) {
  if (!collapse) { return null; }
  return collapse.map(size => styles[`${size}-uncollapse`]);
}

function getUnstackClassName(unstack) {
  if (!unstack) { return null; }
  return unstack.map(size => styles[`${size}-unstack`]);
}

function FlexGridRow(props: Props) {
  const { align, collapse, sizeUp, uncollapse, unstack, ...other } = props;
  const rowClassName = classNames(
    props.className,
    styles.row,
    getAlignClassName(align),
    getCollapseClassName(collapse),
    getSizeUpClassName(sizeUp),
    getUncollapseClassName(uncollapse),
    getUnstackClassName(unstack),
  );

  return (
    <div
      {...other}
      className={rowClassName}
    />
  );
}

export default FlexGridRow;

URL: /components/raw/flexgrid/Row.jsx
Filesystem Path: src/general/FlexGrid/Row.jsx
Size: 1.4 KB

Content:


                                // @flow

import Col from './Col';
import Row from './Row';

export default {
  Col,
  Row,
};

URL: /components/raw/flexgrid/index.js
Filesystem Path: src/general/FlexGrid/index.js
Size: 95 Bytes

Content:


                                @import 'fain/styles/base';

@import 'foundation-sites/scss/components/flex';
@import 'foundation-sites/scss/grid/grid';
@import 'foundation-sites/scss/grid/flex-grid';

@include foundation-flex-classes;
@include foundation-flex-grid;

URL: /components/raw/flexgrid/index.scss
Filesystem Path: src/general/FlexGrid/index.scss
Size: 235 Bytes

Handle: @flexgrid--advanced-sizing
Variants (10): default, advanced-sizing, automatic-stacking, block-grids, collapse-uncollapse-rows, horizontal-alignment, offsets, responsive-adjustments, source-ordering, vertical-alignment
Preview:
- With layout
- Component only
Filesystem Path: src/general/FlexGrid/FlexGrid--advanced-sizing.react

There are no notes for this item.