/* Grids */
.grid {
	display: grid;
	align-items: center;
}

.grid2 {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));}
.grid3 {display: grid; grid-template-columns: repeat(3, 1fr);}
.grid4 {display: grid; grid-template-columns: repeat(4, 1fr);}
.grid5 {display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));}

.grid-pad1 {grid-gap: 1rem;}
.grid-pad3 {grid-gap: 3rem;}
.grid-pad10 {grid-gap: 10rem;}

.grid-pado1 {column-gap: 1rem;}
.grid-pado2 {column-gap: 2rem;}
.grid-pado3 {column-gap: 3rem;}

.grid.al-top {align-items: start;}

/* Tables */
.tbl {
	display: table;
	table-layout: fixed;
	border-collapse: collapse;
	width: 100%;
}

.row {display: table-row;}

.cell {
	display: table-cell;
	vertical-align: top;
}

.tbl-col {display: table-column;}

/* Galleries */
.gallery {
	font-size: 0;
	text-align: left;
}

.ele {
	display: inline-block;
	box-sizing: border-box;
}

.ele3 {display: inline-block; width: calc(100% / 3); box-sizing: border-box;}
.ele4 {display: inline-block; width: 25%; box-sizing: border-box;}
.ele6 {display: inline-block; width: calc(100% / 6); box-sizing: border-box;}
.ele6 {display: inline-block; width: calc(100% / 6); box-sizing: border-box;}
.ele7 {display: inline-block; width: calc(100% / 7); box-sizing: border-box;}

/* Wraps */
.wrap, .wrap-wide {margin-left: auto; margin-right: auto;}

.wrap-wide {
	max-width: 1264px;
	padding-left: 2rem;
	padding-right: 2rem;
	box-sizing: border-box;
}

/* Responsive */
@media (max-width: 1400px) {
	.grid2-1400w {grid-template-columns: repeat(2, 1fr);}
	.grid4-1400w {grid-template-columns: repeat(4, 1fr);}

	.ele2-1400w {width: 50%;}
	.ele5-1400w {width: 20%;}
}

@media (max-width: 1000px) {
	.grid1-1000w {grid-template-columns: 100%; grid-gap: 0 !important;}
	.grid2-1000w {grid-template-columns: repeat(2, 1fr);}
	.grid3-1000w {grid-template-columns: repeat(3, 1fr);}

	.grid-pad3-1000w {grid-gap: 3rem;}
	.grid-pado1-1000w {column-gap: 1rem;}

	.ele2-1000w {width: calc(100% / 2);}
	.ele3-1000w {width: calc(100% / 3);}
	.ele4-1000w {width: 25%;}
}

@media (max-width: 768px) {
	.grid1-768w {grid-template-columns: 100%; grid-gap: 0 !important;}
	.grid2-768w {grid-template-columns: repeat(2, 1fr);}
	.grid3-768w {grid-template-columns: repeat(3, 1fr);}

	.ele1-768w {width: 100%;}
	.ele2-768w {width: 50%;}
	.ele3-768w {width: calc(100% / 3);}
}

@media (max-width: 550px) {
	.grid1-550w {grid-template-columns: 100%; grid-gap: 0 !important;}
	.grid2-550w {grid-template-columns: repeat(2, 1fr);}

	.ele1-550w {width: 100%;}
	.ele2-550w {width: 50%;}
}

@media (max-width: 450px) {
	.ele1-450w {width: 100%;}
}