/** grid **/
.autogrid_grid {display: grid; margin-left: -15px; margin-right: -15px;}
.autogrid_grid .column {padding-left: 15px; padding-right: 15px;}

/** grid gutter **/
.autogrid_grid.gutter_none {margin-left: 0; margin-right: 0;}
.autogrid_grid.gutter_none > .column {padding-left: 0; padding-right: 0;}
.autogrid_grid.gutter_s {margin-left: -15px; margin-right: -15px;}
.autogrid_grid.gutter_s > .column {padding-left: 15px; padding-right: 15px;}
.autogrid_grid.gutter_m {margin-left: -30px; margin-right: -30px;}
.autogrid_grid.gutter_m > .column {padding-left: 30px; padding-right: 30px;}
.autogrid_grid.gutter_l {margin-left: -40px; margin-right: -40px;}
.autogrid_grid.gutter_l > .column {padding-left: 40px; padding-right: 40px;}

/** grid same_height **/
.autogrid_grid.same_height > .column > .attributes {height: 100%;}

/** grid attributes **/
.autogrid_grid .column .attributes {background-size: cover;}
.autogrid_grid .column .attributes.p-xl {padding: 200px 40px 200px 40px;}
.autogrid_grid .column .attributes.p-l {padding: 160px 40px 160px 40px;}
.autogrid_grid .column .attributes.p-m {padding: 115px 40px 115px 40px;}
.autogrid_grid .column .attributes.p-s {padding: 80px 40px 80px 40px;}
.autogrid_grid .column .attributes.p-xs {padding: 40px 40px 40px 40px;}

/** flex row **/
.autogrid_wrapper, .autogrid_row {margin-left: -15px; margin-right: -15px; display: flex; flex-wrap: wrap; box-sizing: border-box;}

/** flex column **/
.autogrid, .autogrid_row .column {padding-left: 15px; padding-right: 15px; flex-basis: 1; flex-grow: 1;  width: 100%; position: relative; box-sizing: border-box;}

/** flex clearing **/
.autogrid_clear {flex: 0 0 100%; height: 0;}

/** flex classes **/
.col_1 		{flex: 0 0 calc((100% / 12) * 1); max-width: calc((100% / 12) * 1);}
.col_2 		{flex: 0 0 calc((100% / 12) * 2); max-width: calc((100% / 12) * 2);}
.col_3 		{flex: 0 0 calc((100% / 12) * 3); max-width: calc((100% / 12) * 3);}
.col_4 		{flex: 0 0 calc((100% / 12) * 4); max-width: calc((100% / 12) * 4);}
.col_5 		{flex: 0 0 calc((100% / 12) * 5); max-width: calc((100% / 12) * 5);}
.col_6 		{flex: 0 0 calc((100% / 12) * 6); max-width: calc((100% / 12) * 6);}
.col_7 		{flex: 0 0 calc((100% / 12) * 7); max-width: calc((100% / 12) * 7);}
.col_8 		{flex: 0 0 calc((100% / 12) * 8); max-width: calc((100% / 12) * 8);}
.col_9 		{flex: 0 0 calc((100% / 12) * 9); max-width: calc((100% / 12) * 9);}
.col_10 	{flex: 0 0 calc((100% / 12) * 10); max-width: calc((100% / 12) * 10);}
.col_11 	{flex: 0 0 calc((100% / 12) * 11); max-width: calc((100% / 12) * 11);}
.col_12 	{flex: 0 0 calc((100% / 12) * 12); max-width: calc((100% / 12) * 12);}

/** flex gutter **/
.autogrid_wrapper.gutter_none, .autogrid_row.gutter_none {margin-left: 0; margin-right: 0;}
.autogrid_wrapper.gutter_none > div, .autogrid_row.gutter_none > div {padding-left: 0; padding-right: 0;}
.autogrid_wrapper.gutter_s, .autogrid_row.gutter_s {margin-left: -15px; margin-right: -15px;}
.autogrid_wrapper.gutter_s > div, .autogrid_row.gutter_s > div {padding-left: 15px; padding-right: 15px;}
.autogrid_wrapper.gutter_m, .autogrid_row.gutter_m {margin-left: -30px; margin-right: -30px;}
.autogrid_wrapper.gutter_m > div, .autogrid_row.gutter_m > div {padding-left: 30px; padding-right: 30px;}
.autogrid_wrapper.gutter_l, .autogrid_row.gutter_l {margin-left: -40px; margin-right: -40px;}
.autogrid_wrapper.gutter_l > div, .autogrid_row.gutter_l > div {padding-left: 40px; padding-right: 40px;}

/* flex order */
.order_1 {order: 1;}
.order_2 {order: 2;}
.order_3 {order: 3;}
.order_4 {order: 4;}
.order_5 {order: 5;}
.order_6 {order: 6;}

/** ag fallback classes **/
.full			{flex: 0 0 100%;}
.one_half 		{flex: 0 0 calc(100% / 2);}
.one_third 		{flex: 0 0 calc(100% / 3);}
.one_fourth		{flex: 0 0 calc(100% / 4);}
.one_fifth		{flex: 0 0 calc(100% / 5);}
.one_sixth		{flex: 0 0 calc(100% / 6);}
.two_third		{flex: 0 0 calc((100% / 3) * 2);}
.two_fourth		{flex: 0 0 calc((100% / 4) * 2);}
.three_fourth	{flex: 0 0 calc((100% / 4) * 3);}
.two_fifth		{flex: 0 0 calc((100% / 5) * 2);}
.three_fifth	{flex: 0 0 calc((100% / 5) * 3);}
.four_fifth		{flex: 0 0 calc((100% / 5) * 4);}
.two_sixth		{flex: 0 0 calc((100% / 6) * 2);}
.three_sixth	{flex: 0 0 calc((100% / 6) * 3);}
.four_sixth		{flex: 0 0 calc((100% / 6) * 4);}
.five_sixth		{flex: 0 0 calc((100% / 6) * 5);}

/** offset**/
.offset_col_1 	{margin-left: calc((100% / 12) * 1);}
.offset_col_2 	{margin-left: calc((100% / 12) * 2);}
.offset_col_3 	{margin-left: calc((100% / 12) * 3);}
.offset_col_4 	{margin-left: calc((100% / 12) * 4);}
.offset_col_5 	{margin-left: calc((100% / 12) * 5);}
.offset_col_6 	{margin-left: calc((100% / 12) * 6);}
.offset_col_7 	{margin-left: calc((100% / 12) * 7);}
.offset_col_8 	{margin-left: calc((100% / 12) * 8);}
.offset_col_9 	{margin-left: calc((100% / 12) * 9);}
.offset_col_10 	{margin-left: calc((100% / 12) * 10);}
.offset_col_11 	{margin-left: calc((100% / 12) * 11);}

/** align **/
.autogrid_grid .column.align_left_top {text-align: left;}
.autogrid_grid .column.align_left_center {text-align: left; align-self: center;}
.autogrid_grid .column.align_left_bottom {text-align: left; align-self: flex-end;}
.autogrid_grid .column.align_center_top {text-align: center;}
.autogrid_grid .column.align_center_center {text-align: center; align-self: center;}
.autogrid_grid .column.align_center_bottom {text-align: center; align-self: flex-end;}
.autogrid_grid .column.align_right_top {text-align: right;}
.autogrid_grid .column.align_right_center {text-align: right; align-self: center;}
.autogrid_grid .column.align_right_bottom {text-align: right; align-self: flex-end;}

/** align + same-height **/
.autogrid_grid.same_height > .column {align-self: unset;}
.autogrid_grid.same_height > .column > .attributes {display: flex; flex-wrap: wrap;}
.autogrid_grid.same_height > .column > .attributes > .same-height-wrap {width: 100%; flex: 0 0 100%;}
.autogrid_grid.same_height > .column.align_left_center > .attributes {align-items: center;}
.autogrid_grid.same_height > .column.align_left_bottom > .attributes {align-items: flex-end;}
.autogrid_grid.same_height > .column.align_center_center > .attributes {align-items: center;}
.autogrid_grid.same_height > .column.align_center_bottom > .attributes {align-items: flex-end;}
.autogrid_grid.same_height > .column.align_right_center > .attributes {align-items: center;}
.autogrid_grid.same_height > .column.align_right_bottom > .attributes {align-items: flex-end;}

/** background-image as <img> in mobile **/
.autogrid_grid .column > .attributes .image_mob {display: none;}

/** tablets **/
@media only screen and (min-width : 768px) and (max-width : 1024px) {
	.col_1_t 	{flex: 0 0 calc((100% / 12) * 1); max-width: calc((100% / 12) * 1);}
	.col_2_t 	{flex: 0 0 calc((100% / 12) * 2); max-width: calc((100% / 12) * 2);}
	.col_3_t 	{flex: 0 0 calc((100% / 12) * 3); max-width: calc((100% / 12) * 3);}
	.col_4_t 	{flex: 0 0 calc((100% / 12) * 4); max-width: calc((100% / 12) * 4);}
	.col_5_t 	{flex: 0 0 calc((100% / 12) * 5); max-width: calc((100% / 12) * 5);}
	.col_6_t 	{flex: 0 0 calc((100% / 12) * 6); max-width: calc((100% / 12) * 6);}
	.col_7_t 	{flex: 0 0 calc((100% / 12) * 7); max-width: calc((100% / 12) * 7);}
	.col_8_t 	{flex: 0 0 calc((100% / 12) * 8); max-width: calc((100% / 12) * 8);}
	.col_9_t 	{flex: 0 0 calc((100% / 12) * 9); max-width: calc((100% / 12) * 9);}
	.col_10_t 	{flex: 0 0 calc((100% / 12) * 10); max-width: calc((100% / 12) * 10);}
	.col_11_t 	{flex: 0 0 calc((100% / 12) * 11); max-width: calc((100% / 12) * 11);}
	.col_12_t 	{flex: 0 0 calc((100% / 12) * 12); max-width: calc((100% / 12) * 12);}
	.order_1_t 	{order: 1;}
	.order_2_t 	{order: 2;}
	.order_3_t 	{order: 3;}
	.order_4_t 	{order: 4;}
	.order_5_t 	{order: 5;}
	.order_6_t 	{order: 6;}
}

/** phones **/
@media only screen and (max-width: 767px) {
	[class*="col_"], .one_half, .one_third, .one_fourth, .one_fifth, .one_sixth, .two_third, .two_fourth, .three_fourth, .two_fifth, .three_fifth, .four_fifth, .two_sixth, .three_sixth .four_sixth, .five_sixth {flex: 0 0 100%; max-width: none;}
	.column[class*="col_"], .autogrid_grid .column {padding-left: 0!important; padding-right: 0!important; margin-bottom: 25px;}
	.column[class*="offset_"], .autogrid[class*="offset_"], .autogrid_grid[class*="offset_"] {margin-left: 0;}
	.autogrid_wrapper, .autogrid_row, .autogrid_grid {margin-left: 0!important; margin-right: 0!important;}
	.autogrid_grid .column .attributes.has-image.empty > .image_mob,
	.autogrid_grid .column .attributes.has-image.empty > .same-height-wrap > .image_mob {display: block;}
	.autogrid_grid .column .attributes.has-image.empty {background: none!important;}
	.col_1_m 		{flex: 0 0 calc((100% / 12) * 1); max-width: calc((100% / 12) * 1);}
	.col_2_m 		{flex: 0 0 calc((100% / 12) * 2); max-width: calc((100% / 12) * 2);}
	.col_3_m 		{flex: 0 0 calc((100% / 12) * 3); max-width: calc((100% / 12) * 3);}
	.col_4_m 		{flex: 0 0 calc((100% / 12) * 4); max-width: calc((100% / 12) * 4);}
	.col_5_m 		{flex: 0 0 calc((100% / 12) * 5); max-width: calc((100% / 12) * 5);}
	.col_6_m 		{flex: 0 0 calc((100% / 12) * 6); max-width: calc((100% / 12) * 6);}
	.col_7_m 		{flex: 0 0 calc((100% / 12) * 7); max-width: calc((100% / 12) * 7);}
	.col_8_m 		{flex: 0 0 calc((100% / 12) * 8); max-width: calc((100% / 12) * 8);}
	.col_9_m 		{flex: 0 0 calc((100% / 12) * 9); max-width: calc((100% / 12) * 9);}
	.col_10_m 	{flex: 0 0 calc((100% / 12) * 10); max-width: calc((100% / 12) * 10);}
	.col_11_m 	{flex: 0 0 calc((100% / 12) * 11); max-width: calc((100% / 12) * 11);}
	.col_12_m 	{flex: 0 0 calc((100% / 12) * 12); max-width: calc((100% / 12) * 12);}
	.order_1_m 	{order: 1;}
	.order_2_m 	{order: 2;}
	.order_3_m 	{order: 3;}
	.order_4_m 	{order: 4;}
	.order_5_m 	{order: 5;}
	.order_6_m 	{order: 6;}
	.autogrid_grid .column .attributes.p-xl,
	.autogrid_grid .column .attributes.p-l,
	.autogrid_grid .column .attributes.p-m,
	.autogrid_grid .column .attributes.p-s,
	.autogrid_grid .column .attributes.p-xs {padding: 20px;}
}