@media (min-width: 768px) and (max-width: 1023px) {
    .md-d-ib { display: inline-block; }

    .md-fs-lg { font-size: var(--fs-lg); }
    .md-fs-xl { font-size: var(--fs-xl); }
    .md-fs-2xl { font-size: var(--fs-2xl); }
    .md-fs-3xl { font-size: var(--fs-3xl); }
    .md-fs-4xl { font-size: var(--fs-4xl); }
    .md-fs-5xl { font-size: var(--fs-5xl); }
    .md-fs-6xl { font-size: var(--fs-6xl); }
    .md-fs-7xl { font-size: var(--fs-7xl); }
    .md-fs-8xl { font-size: var(--fs-8xl); }

    .md-gtc-2 { grid-template-columns: 1fr 1fr; }
    .md-gtc-3 { grid-template-columns: 1fr 1fr 1fr; }
    .md-gtc-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
    .md-gtc-5 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
    .md-gtc-1-3 { grid-template-columns: 1fr 3fr; }
    .md-gtc-1-2 { grid-template-columns: 1fr 2fr; }
    .md-gtc-2-1 { grid-template-columns: 2fr 1fr; }
    .md-gtc-3-1 { grid-template-columns: 3fr 1fr; }

    .md-m-a { margin: auto; }
    .md-mlr-a { margin-left: auto; margin-right: auto; }

    .md-w35 { width: 35%; }
    .md-w40 { width: 40%; }
    .md-w45 { width: 45%; }
    .md-w50 { width: 50%; }
    .md-w55 { width: 55%; }
    .md-w60 { width: 60%; } 
    .md-w65 { width: 65%; }

    .md-p1 { padding: 1rem; }
    .md-p2 { padding: 2rem; }
    .md-plr5vw { padding-left: 5vw; padding-right: 5vw; }
    .md-plr10vw { padding-left: 10vw; padding-right: 10vw; }
    .md-plr15vw { padding-left: 15vw; padding-right: 15vw; }
    .md-plr20vw { padding-left: 20vw; padding-right: 20vw; }
    .md-plr25vw { padding-left: 25vw; padding-right: 25vw; }

    .md-ws-nw { white-space: nowrap; }
    
    .cg-lg { column-gap: 50px; }
    .cg-md { column-gap: 30px; }
    .cg-sm { column-gap: 15px; }
    .rg-lg { row-gap: 75px; }
    .rg-md { row-gap: 50px; }
    .rg-sm { row-gap: 25px; }
}

@media (min-width: 768px) {

    .mdu-half { flex: 1 1 calc(50% - (36px / 2)); }
    .mdu-third { flex: 1 1 calc(33.33% - (36px * 2 / 3)); }
    .mdu-two-thirds { flex: 1 1 calc(66.33% - (36px * 2 / 3)); }
    
    .mdu-d-ib { display: inline-block; }
    .mdu-d-f { display: flex; }
    .mdu-d-g { display: grid; }

    .mdu-fd-cr { flex-direction: column-reverse; }
    .mdu-fd-rr { flex-direction: row-reverse; }
    .mdu-fs-lg { font-size: var(--fs-lg); }
    .mdu-fs-xl { font-size: var(--fs-xl); }
    .mdu-fs-2xl { font-size: var(--fs-2xl); }
    .mdu-fs-3xl { font-size: var(--fs-3xl); }
    .mdu-fs-4xl { font-size: var(--fs-4xl); }
    .mdu-fs-5xl { font-size: var(--fs-5xl); }
    .mdu-fs-6xl { font-size: var(--fs-6xl); }
    .mdu-fs-7xl { font-size: var(--fs-7xl); }
    .mdu-fs-8xl { font-size: var(--fs-8xl); }

    .mdu-gtc-2 { grid-template-columns: 1fr 1fr; }
    .mdu-gtc-3 { grid-template-columns: 1fr 1fr 1fr; }
    .mdu-gtc-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
    .mdu-gtc-5 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
    .mdu-gtc-1-3 { grid-template-columns: 1fr 3fr; }
    .mdu-gtc-1-2 { grid-template-columns: 1fr 2fr; }
    .mdu-gtc-2-1 { grid-template-columns: 2fr 1fr; }
    .mdu-gtc-3-1 { grid-template-columns: 3fr 1fr; }

    .mdu-h100 { height:100%; }

    .mdu-jc-sb { justify-content: space-between; }
    .mdu-jc-fe { justify-content: flex-end; }

    .mdu-m-a { margin: auto; }
    .mdu-mlr-a { margin-left: auto; margin-right: auto; }
    .mdu-mb0 { margin-bottom: 0; }
    .mdu-mt0 { margin-top: 0; }

    .mdu-o1 { order: 1; }
    .mdu-o2 { order: 2; }
    .mdu-o3 { order: 3; }
    .mdu-o4 { order: 4; }

    .mdu-obj-fit { object-fit: cover; object-position: center; }

    .mdu-p1 { padding: 1rem; }
    .mdu-p2 { padding: 2rem; }
    .mdu-p1 { padding: 1rem; }
    .mdu-p2 { padding: 2rem; }
    .mdu-p3 { padding: 3rem; }
    .mdu-pb0 { padding-bottom: 0; }
    .mdu-pt0 { padding-top: 0; }
    .mdu-pb1 { padding-bottom: 1rem; }
    .mdu-pb2 { padding-bottom: 2rem; }
    .mdu-pb3 { padding-bottom: 3rem; }
    .mdu-pb4 { padding-bottom: 4rem; }
    .mdu-pt1 { padding-top: 1rem; }
    .mdu-pt2 { padding-top: 2rem; }
    .mdu-pt3 { padding-top: 3rem; }
    .mdu-pt4 { padding-top: 4rem; }
    .mdu-plr5vw { padding-left: 5vw; padding-right: 5vw; }
    .mdu-plr10vw { padding-left: 10vw; padding-right: 10vw; }
    .mdu-plr15vw { padding-left: 15vw; padding-right: 15vw; }
    .mdu-plr20vw { padding-left: 20vw; padding-right: 20vw; }
    .mdu-plr25vw { padding-left: 25vw; padding-right: 25vw; }

    .mdu-ws-nw { white-space: nowrap; }
}