/* Grid */
.grid {display: grid}

.gtc-6 { grid-template-columns: repeat(6, 1fr)}
.gtc-5 { grid-template-columns: repeat(5, 1fr)}
.gtc-4 { grid-template-columns: repeat(4, 1fr)}
.gtc-3 { grid-template-columns: repeat(3, 1fr)}
.gtc-2 { grid-template-columns: repeat(2, 1fr)}

.pc-c { place-content: center}

.va-m {vertical-align: middle}

.ac-c  {align-content: center}
.ac-se {align-content: space-evenly}
.ac-sa {align-content: space-around}
.ac-sb {align-content: space-between}
.ac-fs {align-content: flex-start}
.ac-fe {align-content: flex-end}
.ac-st {align-content: stretch}

.jc-с  {justify-content: center}
.jc-s  {justify-content: start}
.jc-e  {justify-content: end}
.jc-sb {justify-content: space-between}
.jc-sa {justify-content: space-around}
.jc-se {justify-content: space-evenly}
.jc-fs {justify-content: flex-start}
.jc-fe {justify-content: flex-end}

.ai-c  {align-items: center}
.ai-s  {align-items: start}
.ai-e  {align-items: end}
.ai-st {align-items: stretch}
.ai-b  {align-items: baseline}
.ai-fs {align-items: flex-start}
.ai-fe {align-items: flex-end}

.ji-c  {justify-items: center}
.ji-s  {justify-items: start}
.ji-e  {justify-items: end}
.ji-st {justify-items: stretch}

.col-1-1 { grid-column: 1/2 }
.col-1-2 { grid-column: 1/3 }
.col-1-3 { grid-column: 1/4 }
.col-1-4 { grid-column: 1/5 }
.col-1-5 { grid-column: 1/6 }
.col-1-6 { grid-column: 1/7 }
.col-2-1 { grid-column: 2/3 }
.col-2-2 { grid-column: 2/4 }
.col-2-3 { grid-column: 2/5 }
.col-2-4 { grid-column: 2/6 }
.col-2-5 { grid-column: 2/7 }
.col-3-2 { grid-column: 3/5 }
.col-3-3 { grid-column: 3/6 }
.col-3-4 { grid-column: 3/7 }
.col-4-2 { grid-column: 4/6 }
.col-4-3 { grid-column: 4/7 }
.col-5-2 { grid-column: 5/7 }

.gcg-12 {grid-column-gap:12px}
.gcg-40 {grid-column-gap:40px}

.gg-2  {grid-gap: 2px}
.gg-5  {grid-gap: 5px}
.gg-7  {grid-gap: 7px}
.gg-12 {grid-gap: 12px}
.gg-24 {grid-gap: 24px}
.gg-32 {grid-gap: 32px}
.gg-40 {grid-gap: clamp(8px, 2vh, 40px)}
.gg-42 {grid-gap: 42px}
.gg-56 {grid-gap: 56px}

@media screen and (max-width:480px){
    .gtc-2, .gtc-3, .gtc-4, .gtc-5, .gtc-6 { grid-template-columns: repeat(1, 1fr)}
    
    .col-1-1, .col-1-2, .col-1-3, .col-1-4, .col-1-5, 
    .col-1-6, .col-2-1, .col-2-2, .col-2-3, .col-2-4, 
    .col-2-5, .col-3-2, .col-3-3, .col-3-4, .col-4-2, 
    .col-4-3, .col-5-2 { grid-column: auto }
}