.padding-v {
    padding-top: var(--padding-v);
    padding-bottom: var(--padding-v);
}

.padding-h {
    padding-left: var(--padding-h);
    padding-right: var(--padding-h);
}

.pos-rel {
    position: relative;
    z-index: 1;
}

.overflow-hidden {
    overflow: hidden;
}

.mb-5 {
    margin-bottom: 5px;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-20,
.mb-40 {
    margin-bottom: 20px;
}

@media screen and (min-width: 1200px) {
    .mb-40 {
        margin-bottom: 40px;
    }
}

/* –––– GRID & FLEX –––– */

.grid {
	display: grid;
}

.flex {
    display: flex;
}

.flex-wrap {
    flex-wrap: wrap;
}

.justify-center {
    justify-content: center;
    justify-items: center;
}

.justify-left {
    justify-content: flex-start;
    justify-items: flex-start;
}

.justify-right {
    justify-content: flex-end;
    justify-items: flex-end;
}

.align-top {
    align-items: flex-start;
    align-content: flex-start;
}

.align-center {
    align-items: center;
    align-content: center !important;
}

.align-bottom {
    align-items: flex-end;
    align-content: flex-end !important;
}

.no-gap {
    gap: 0 !important;
}

.gap-5 {
    gap: 5px;
}

.gap-10 {
    gap: 10px;
}

.gap-20 {
    gap: 20px;
}

.gap-40,
.gap-60 {
    gap: 20px;
}

.gap-80,
.gap-100 {
    gap: 40px;
}

.span-col-2 {
    grid-column: span 1;
}

.span-col-4 {
    grid-column: span 2;
}

@media screen and (min-width: 750px) {
    .gap-60,
    .gap-80,
    .gap-100 {
        gap: 40px
    }
    
    .grid.col-2 {
	    grid-template-columns: repeat(2, 1fr);
    }
    
    .grid.col-3 {
    	grid-template-columns: repeat(3, 1fr);
    }
    
    .grid.col-4 {
    	grid-template-columns: repeat(4, 1fr);
    }
    
    .span-col-2 {
        grid-column: span 2;
    }
    
    .span-col-4 {
        grid-column: span 4;
    }
    
    .grid-col-full {
        grid-row: span 2;
    }
    
    .grid-row-full {
        grid-column: span 2;
    }
}

@media screen and (min-width: 1200px) {
    .gap-40 {
        gap: 40px
    }
    
    .gap-80 {
        gap: 80px
    }
    
    .gap-100 {
        gap: 100px
    }
}

@media screen and (max-width: 749px) {
    .order-mobile-first {
        order: -1;
    }
    
    .order-mobile-last {
        order: 99;
    }
}

/* –––– OPACITY –––– */

.op-75 {
    opacity: 0.75;
}

.op-5 {
    opacity: 0.5;
}

.op-25 {
    opacity: 0.25;
}

/* –––– ROUNDED CORNERS –––– */

@media screen and (min-width: 750px) {
    #hero {
        min-height: 50vh
    }
    
    .border-bottom-left-round,
    .border-bottom-left-round > div {
        border-bottom-left-radius: calc(var(--border-radius) * 2);
    }
    
    .border-top-left-round,
    .border-top-left-round > div {
        border-top-left-radius: calc(var(--border-radius) * 2);
    }

    .border-bottom-right-round,
    .border-bottom-right-round > div {
        border-bottom-right-radius: calc(var(--border-radius) * 2);
    }

    .border-top-right-round,
    .border-top-right-round > div {
        border-top-right-radius: calc(var(--border-radius) * 2);
    }
}