Hever: Rework widget area

hever/sass/_extra-child-theme.scss

@@ -323,6 +323,10 @@ article .entry-header .entry-title,
 	max-width: 100%;
 	width: 100%;
 
+	& > *:last-child {
+		margin-bottom: #{map-deep-get($config-global, "spacing", "vertical")};
+	}
+
 	.widget-title,
 	.widgettitle {
   	font-size: #{map-deep-get($config-global, "font", "size", "md")};
@@ -333,23 +337,24 @@ article .entry-header .entry-title,
     }
   }
 
-	@include media(mobile) {
-		padding-bottom: #{map-deep-get($config-global, "spacing", "vertical")};
-	}
-
   @include media(laptop) {
-		display: grid;
-		grid-template-columns: repeat(2, 1fr);
-		grid-column-gap: #{map-deep-get($config-global, "spacing", "vertical")};
+		display: flex;
+		flex-wrap: wrap;
 		justify-content: space-between;
 
-    & > *:nth-child(2) {
+		.widget {
+			width: calc(50% - #{map-deep-get($config-global, "spacing", "horizontal")})
+		}
+
+		& > *:nth-child(2) {
       margin-top: 0;
     }
   }
 
 	@include media(desktop) {
-	grid-template-columns: repeat(3, 1fr);
+		.widget {
+			width: calc(33.3333% - #{1.333 * map-deep-get($config-global, "spacing", "horizontal")})
+		}
 
 		& > *:nth-child(3) {
       margin-top: 0;

hever/style-rtl.css

@@ -3528,6 +3528,10 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 	width: 100%;
 }
 
+.widget-area > *:last-child {
+	margin-bottom: 32px;
+}
+
 .widget-area .widget-title,
 .widget-area .widgettitle {
 	font-size: 1.15rem;
@@ -3539,27 +3543,23 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 	display: none;
 }
 
-@media only screen and (min-width: 560px) {
-	.widget-area {
-		padding-bottom: 32px;
-	}
-}
-
 @media only screen and (min-width: 782px) {
 	.widget-area {
-		display: grid;
-		grid-template-columns: repeat(2, 1fr);
-		grid-column-gap: 32px;
+		display: flex;
+		flex-wrap: wrap;
 		justify-content: space-between;
 	}
+	.widget-area .widget {
+		width: calc(50% - 16px);
+	}
 	.widget-area > *:nth-child(2) {
 		margin-top: 0;
 	}
 }
 
 @media only screen and (min-width: 1024px) {
-	.widget-area {
-		grid-template-columns: repeat(3, 1fr);
+	.widget-area .widget {
+		width: calc(33.3333% - 21.328px);
 	}
 	.widget-area > *:nth-child(3) {
 		margin-top: 0;

hever/style.css

@@ -3533,6 +3533,10 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 	width: 100%;
 }
 
+.widget-area > *:last-child {
+	margin-bottom: 32px;
+}
+
 .widget-area .widget-title,
 .widget-area .widgettitle {
 	font-size: 1.15rem;
@@ -3544,27 +3548,23 @@ article .entry-header .entry-title a:active, article .entry-header .entry-title
 	display: none;
 }
 
-@media only screen and (min-width: 560px) {
-	.widget-area {
-		padding-bottom: 32px;
-	}
-}
-
 @media only screen and (min-width: 782px) {
 	.widget-area {
-		display: grid;
-		grid-template-columns: repeat(2, 1fr);
-		grid-column-gap: 32px;
+		display: flex;
+		flex-wrap: wrap;
 		justify-content: space-between;
 	}
+	.widget-area .widget {
+		width: calc(50% - 16px);
+	}
 	.widget-area > *:nth-child(2) {
 		margin-top: 0;
 	}
 }
 
 @media only screen and (min-width: 1024px) {
-	.widget-area {
-		grid-template-columns: repeat(3, 1fr);
+	.widget-area .widget {
+		width: calc(33.3333% - 21.328px);
 	}
 	.widget-area > *:nth-child(3) {
 		margin-top: 0;