:root {
    --altura-base: 9px
}

@media (min-width:0) {
    .ch {
        display: grid
    }
    .gd {
        display: none!important
    }
    .md {
        display: none!important
    }
    .rowmargin {
        padding: 6%!important
    }
    .responsive-test {
        color: red
    }
    .col-1 {
        grid-template-columns: repeat(1, 1fr)
    }
    .col-space-1-xs {
        grid-column-start: 1!important
    }
    .col-span-2-xs {
        grid-column: span 2/span 2
    }
    .col-2 {
        grid-template-columns: repeat(1, 1fr)
    }
  
    .col-2-xs {
        grid-template-columns: repeat(2, 1fr)!important
    }
    .col-space-2-xs {
        grid-column-start: 2
    }
    
    .col-3 {
        grid-template-columns: repeat(1, 1fr)
    }
    .col-3-xs {
        grid-template-columns: repeat(3, 1fr)
    }
    .col-space-3-xs {
        grid-column-start: 3!important
    }
    .col-span-3-xs {
        grid-column: span 1/span 1
    }
    .col-span-3-s {
        grid-column: span 3/span 3
    }
    .col-4 {
        grid-template-columns: repeat(1, 1fr)
    }
    .col-4-xs {
        grid-template-columns: repeat(4, 1fr)
    }
    .col-space-4-xs {
        grid-column-start: 4!important
    }
    .col-span-4-xs {
        grid-column: span 1/span 1
    }
    .col-5 {
        grid-template-columns: repeat(1, 1fr)
    }

    .col-5-xs {
        grid-template-columns: repeat(5, 1fr)
    }

    .col-space-5-xs {
        grid-column-start: 1!important
    }
    .col-span-5-xs {
        grid-column: span 1/span 1
    }
    .col-6 {
        grid-template-columns: repeat(1, 1fr)
    }
    .col-space-6-xs {
        grid-column-start: 1!important
    }
    .col-span-6-xs {
        grid-column: span 1/span 1
    }
    .col-7 {
        grid-template-columns: repeat(1, 1fr)
    }
    .col-space-7-xs {
        grid-column-start: 1!important
    }
    .col-span-7-xs {
        grid-column: span 1/span 1
    }
    .col-8 {
        grid-template-columns: repeat(1, 1fr)
    }
    .col-space-8-xs {
        grid-column-start: 1!important
    }
    .col-span-8-xs {
        grid-column: span 1/span 1
    }
    .col-9 {
        grid-template-columns: repeat(1, 1fr)
    }
    .col-space-9-xs {
        grid-column-start: 1!important
    }
    .col-span-9-xs {
        grid-column: span 1/span 1
    }
    .col-10 {
        grid-template-columns: repeat(1, 1fr)
    }
    .col-space-10-xs {
        grid-column-start: 1!important
    }
    .col-span-10-xs {
        grid-column: span 1/span 1
    }
    .col-11 {
        grid-template-columns: repeat(1, 1fr)
    }
    .col-space-11-xs {
        grid-column-start: 1!important
    }
    .col-span-11-xs {
        grid-column: span 1/span 1
    }
    .col-12 {
        grid-template-columns: repeat(3, 1fr)
    }
    .col-space-12-xs {
        grid-column-start: 3!important
    }
    .col-span-12-xs {
        grid-column: span 3/span 3
    }
    ._80vh-xs{
        min-height: 80vh;
    }
    ._row-3-xs{
        grid-template-rows: repeat(3, 1fr);
    }
    ._row-space-2-xs{
        grid-row-start: 3!important
    }

}

@media (min-width:480px) {
    .ch {
        display: grid
    }
    .md {
        display: grid
    }
    .gd {
        display: none
    }
    .rowmargin {
        padding: 0 6%!important
    }
    .responsive-test {
        color: #00f
    }
    .col-1 {
        grid-template-columns: repeat(1, 1fr)
    }
    .col-1-sm {
        grid-template-columns: repeat(2, 1fr)
    }
    .col-space-1-sm {
        grid-column-start: 1!important
    }
    .col-span-1-sm {
        grid-column: span 2/span 2
    }
    .col-2 {
        grid-template-columns: repeat(1, 1fr)
    }
    .col-2-sm {
        grid-template-columns: repeat(2, 1fr)!important
    }
    .col-space-2-xs {
        grid-column-start: 0
    }
    .col-space-2-x {
        grid-column-start: 2
    }
    .col-3 {
        grid-template-columns: repeat(1, 1fr)
    }
    .col-3-sm {
        grid-template-columns: repeat(3, 1fr)!important
    }
    .col-space-3-sm {
        grid-column-start: 3!important
    }
    .col-span-3-sm {
        grid-column: span 1/span 1
    }
    .col-4 {
        grid-template-columns: repeat(1, 1fr)
    }
    .col-4-xs {
        grid-template-columns: none
    }
    .col-4-sm {
        grid-template-columns: repeat(4, 1fr)
    }
    .col-space-4-sm {
        grid-column-start: 4!important
    }
    .col-span-4-sm {
        grid-column: span 1/span 1
    }
    .col-5 {
        grid-template-columns: repeat(1, 1fr)
    }
    .col-space-5-sm {
        grid-column-start: 1!important
    }
    .col-span-5-sm {
        grid-column: span 1/span 1
    }
    .col-6 {
        grid-template-columns: repeat(1, 1fr)
    }
    .col-space-6-sm {
        grid-column-start: 1!important
    }
    .col-span-6-sm {
        grid-column: span 1/span 1
    }
    .col-7 {
        grid-template-columns: repeat(1, 1fr)
    }
    .col-space-7-sm {
        grid-column-start: 1!important
    }
    .col-span-7-sm {
        grid-column: span 1/span 1
    }
    .col-8 {
        grid-template-columns: repeat(1, 1fr)
    }
    .col-space-8-sm {
        grid-column-start: 1!important
    }
    .col-span-8-sm {
        grid-column: span 1/span 1
    }
    .col-9 {
        grid-template-columns: repeat(1, 1fr)
    }
    .col-space-9-sm {
        grid-column-start: 1!important
    }
    .col-span-9-sm {
        grid-column: span 1/span 1
    }
    .col-10 {
        grid-template-columns: repeat(1, 1fr)
    }
    .col-space-10-sm {
        grid-column-start: 1!important
    }
    .col-span-10-sm {
        grid-column: span 1/span 1
    }
    .col-11 {
        grid-template-columns: repeat(1, 1fr)
    }
    .col-space-11-sm {
        grid-column-start: 1!important
    }
    .col-span-11-sm {
        grid-column: span 1/span 1
    }
    .col-12 {
        grid-template-columns: repeat(1, 1fr)
    }
    .col-space-12-sm {
        grid-column-start: 1!important
    }
    .col-span-12-sm {
        grid-column: span 1/span 1
    }
}

@media (min-width:720px) {
    .gd {
        display: none!important
    }
    .ch {
        display: none!important
    }
    .md {
        display: grid!important
    }
    .responsive-test {
        color: green
    }
    .col-span-2 {
        grid-column: span 2/span 2
    }
    .col-space-2-md {
        grid-column-start: 2!important
    }
    .col-span-1-sm {
        grid-column: none!important;
    }
    .col-1 {
        grid-template-columns: repeat(1, 1fr)
    }
    .col-1-sm {
        grid-template-columns: repeat(2, 1fr)
    }
    .col-space-1-sm {
        grid-column-start: 1!important
    }
    .col-span-1-sm {
        grid-column: span 2/span 2
    }
    .col-2 {
        grid-template-columns: repeat(1, 1fr)
    }
    .col-2-sm {
        grid-template-columns: repeat(2, 1fr)!important
    }
    .col-space-2-xs {
        grid-column-start: 0
    }
    .col-space-2-x {
        grid-column-start: 2
    }
    .col-3 {
        grid-template-columns: repeat(1, 1fr)
    }
    .col-3-sm {
        grid-template-columns: repeat(3, 1fr)!important
    }
    .col-space-3-sm {
        grid-column-start: 3!important
    }
    .col-span-3-sm {
        grid-column: span 1/span 1
    }
    .col-4 {
        grid-template-columns: repeat(1, 1fr)
    }
    .col-4-sm {
        grid-template-columns: repeat(4, 1fr)
    }
    .col-space-4-sm {
        grid-column-start: 4!important
    }
    .col-span-4-sm {
        grid-column: span 1/span 1
    }
    .col-5 {
        grid-template-columns: repeat(1, 1fr)
    }
    .col-space-5-sm {
        grid-column-start: 1!important
    }
    .col-span-5-sm {
        grid-column: span 1/span 1
    }
    .col-6 {
        grid-template-columns: repeat(1, 1fr)
    }
    .col-space-6-sm {
        grid-column-start: 1!important
    }
    .col-span-6-sm {
        grid-column: span 1/span 1
    }
    .col-7 {
        grid-template-columns: repeat(1, 1fr)
    }
    .col-space-7-sm {
        grid-column-start: 1!important
    }
    .col-span-7-sm {
        grid-column: span 1/span 1
    }
    .col-8 {
        grid-template-columns: repeat(1, 1fr)
    }
    .col-space-8-sm {
        grid-column-start: 1!important
    }
    .col-span-8-sm {
        grid-column: span 1/span 1
    }
    .col-9 {
        grid-template-columns: repeat(1, 1fr)
    }
    .col-space-9-sm {
        grid-column-start: 1!important
    }
    .col-span-9-sm {
        grid-column: span 1/span 1
    }
    .col-10 {
        grid-template-columns: repeat(1, 1fr)
    }
    .col-space-10-sm {
        grid-column-start: 1!important
    }
    .col-span-10-sm {
        grid-column: span 1/span 1
    }
    .col-11 {
        grid-template-columns: repeat(1, 1fr)
    }
    .col-space-11-sm {
        grid-column-start: 1!important
    }
    .col-span-11-sm {
        grid-column: span 1/span 1
    }
    .col-12 {
        grid-template-columns: repeat(1, 1fr)
    }
    .col-space-12-sm {
        grid-column-start: 1!important
    }
    .col-span-12-sm {
        grid-column: span 1/span 1
    }
}

@media (min-width:960px) {
    .gd {
        display: grid!important
    }
    .ch {
        display: none!important
    }
    .responsive-test {
        color: purple
    }
    ._70vh {
        min-height: 70vh;
    }

    ._80vh {
        min-height: 80vh;
        height: 80vh;

    }
    ._90vh {
        min-height: 90vh;
    }
    ._100vh {
        min-height: 100vh;
    }
    .col-1 {
        grid-template-columns: repeat(1, 1fr)
    }
    .col-space-1 {
        grid-column-start: 1!important
    }
    .col-span-1 {
        grid-column: span 1/span 1
    }
    .col-2 {
        grid-template-columns: repeat(2, 1fr)
    }
    .col-space-2 {
        grid-column-start: 2!important
    }
    .col-span-2 {
        grid-column: span 2/span 2
    }
    .col-space-2-xs {
        grid-column-start: none
    }
    .col-space-2-x {
        grid-column-start: none
    }
    .col-3 {
        grid-template-columns: repeat(3, 1fr)
    }
    .col-space-3 {
        grid-column-start: 3!important
    }
    .col-span-3 {
        grid-column: span 3/span 3
    }
    .col-4 {
        grid-template-columns: repeat(4, 1fr)!important
    }
    .col-space-4 {
        grid-column-start: 4!important
    }
    .col-span-4 {
        grid-column: span 4/span 4
    }
    .col-5 {
        grid-template-columns: repeat(5, 1fr)
    }
    .col-space-5 {
        grid-column-start: 5!important
    }
    .col-span-5 {
        grid-column: span 5/span 5
    }
    .col-6 {
        grid-template-columns: repeat(6, 1fr)
    }
    .col-space-6 {
        grid-column-start: 6!important
    }
    .col-span-6 {
        grid-column: span 6/span 6
    }
    .col-7 {
        grid-template-columns: repeat(7, 1fr)
    }
    .col-space-7 {
        grid-column-start: 7!important
    }
    .col-span-7 {
        grid-column: span 7/span 7
    }
    .col-8 {
        grid-template-columns: repeat(8, 1fr)
    }
    .col-space-8 {
        grid-column-start: 8!important
    }
    .col-span-8 {
        grid-column: span 8/span 8
    }
    .col-9 {
        grid-template-columns: repeat(9, 1fr)
    }
    .col-space-9 {
        grid-column-start: 9!important
    }
    .col-span-9 {
        grid-column: span 9/span 9
    }
    .col-10 {
        grid-template-columns: repeat(10, 1fr)
    }
    .col-space-10 {
        grid-column-start: 10!important
    }
    .col-span-10 {
        grid-column: span 10/span 10
    }
    .col-11 {
        grid-template-columns: repeat(11, 1fr)
    }
    .col-space-11 {
        grid-column-start: 11!important
    }
    .col-span-11 {
        grid-column: span 11/span 11
    }
    .col-12 {
        grid-template-columns: repeat(12, 1fr)
    }
    .col-space-12 {
        grid-column-start: 12!important
    }
    .col-span-12 {
        grid-column: span 12/span 12
    }
    .article {
        max-width: 560px;
        width: 560px;
    }
    
}

@media (min-width:1200px) {
    .rowmargin {
        padding: 0 calc(100% / 12)!important
    }
    .responsive-test {
        color: orange
    }
    .col-1 {
        grid-template-columns: repeat(1, 1fr)
    }
    .col-space-1 {
        grid-column-start: 1!important
    }
    .col-span-1 {
        grid-column: span 1/span 1
    }
    .col-2 {
        grid-template-columns: repeat(2, 1fr)
    }
    .col-space-2 {
        grid-column-start: 2!important
    }
    .col-span-2 {
        grid-column: span 2/span 2
    }
    .col-3 {
        grid-template-columns: repeat(3, 1fr)
    }
    .col-space-3 {
        grid-column-start: 3!important
    }
    .col-span-3 {
        grid-column: span 3/span 3
    }
    .col-4 {
        grid-template-columns: repeat(4, 1fr)
    }
    .col-space-4 {
        grid-column-start: 4!important
    }
    .col-span-4 {
        grid-column: span 4/span 4
    }
    .col-5 {
        grid-template-columns: repeat(5, 1fr)
    }
    .col-space-5 {
        grid-column-start: 5!important
    }
    .col-span-5 {
        grid-column: span 5/span 5
    }
    .col-6 {
        grid-template-columns: repeat(6, 1fr)
    }
    .col-space-6 {
        grid-column-start: 6!important
    }
    .col-span-6 {
        grid-column: span 6/span 6
    }
    .col-7 {
        grid-template-columns: repeat(7, 1fr)
    }
    .col-space-7 {
        grid-column-start: 7!important
    }
    .col-span-7 {
        grid-column: span 7/span 7
    }
    .col-8 {
        grid-template-columns: repeat(8, 1fr)
    }
    .col-space-8 {
        grid-column-start: 8!important
    }
    .col-span-8 {
        grid-column: span 8/span 8
    }
    .col-9 {
        grid-template-columns: repeat(9, 1fr)
    }
    .col-space-9 {
        grid-column-start: 9!important
    }
    .col-span-9 {
        grid-column: span 9/span 9
    }
    .col-10 {
        grid-template-columns: repeat(10, 1fr)
    }
    .col-space-10 {
        grid-column-start: 10!important
    }
    .col-span-10 {
        grid-column: span 10/span 10
    }
    .col-11 {
        grid-template-columns: repeat(11, 1fr)
    }
    .col-space-11 {
        grid-column-start: 11!important
    }
    .col-span-11 {
        grid-column: span 11/span 11
    }
    .col-12 {
        grid-template-columns: repeat(12, 1fr)
    }
    .col-space-12 {
        grid-column-start: 12!important
    }
    .col-span-12 {
        grid-column: span 12/span 12
    }
    .article {
        max-width: 560px;
        width: 560px;
    }
    
    ._center-gd {
        align-content: center;
        justify-content: center;
        align-self: center;
    }
}

@media (min-width:1920px) {
    .responsive-test {
        color: pink
    }
    .article {
        max-width: 560px;
        width: 560px;
    }
}

@-moz-document url-prefix() {}

body,
html {
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0;
}

[class*=col-] {
    box-sizing: border-box
}

nav {
    height: calc(var(--altura-base) * 6)!important
}

.row {
    display: grid;
}

._w100 {
    width: 100vw;
}

._100vh {
    min-height: 100vh
}

section {
    min-height: calc(var(--altura-base) * 21)
}


/* footer {
    grid-auto-rows: calc(var(--altura-base) * 4)!important
} */

.row>div {
    /* height: 100%;*/
    display: grid
}

.gap {
    grid-gap: 9px 9px;
}

._center {
    align-content: center;
    justify-content: center;
    align-self: center;
    text-align: center;
}


._center-left {
    align-content: center;
    justify-content: left;
    text-align: left;
}

._bottom_left {
    align-content: flex-end;
    justify-content: left
}

._top_left {
    align-content: flex-start;
    justify-content: left
}

._right {
    align-content: center;
    justify-content: right;
    text-align: right;
}

._left {
    align-content: center;
    justify-content: left;
    text-align: left;
}

._square {
    aspect-ratio: 1;
}

span {
    display: inline-flex;
}