modified header and menus on big and small screens

adminstyles.css

@@ -1165,6 +1165,14 @@ Add your custom styles in this file so it is easier to update the theme.
 	outline: 0;
 }
 
+@media screen and (max-width: 48em) {
+
+	.edit-post-visual-editor__content-area .editor-styles-wrapper a {
+		overflow-wrap: anywhere;
+		word-break: normal;
+	}
+}
+
 .edit-post-visual-editor__content-area .editor-styles-wrapper button,
 .edit-post-visual-editor__content-area .editor-styles-wrapper input[type="button"],
 .edit-post-visual-editor__content-area .editor-styles-wrapper input[type="reset"],
@@ -1308,11 +1316,23 @@ Add your custom styles in this file so it is easier to update the theme.
 
 @media screen {
 
-	.edit-post-visual-editor__content-area .editor-styles-wrapper html:not([data-scroll="0"]) .site-header {
+	.edit-post-visual-editor__content-area .editor-styles-wrapper html:not([data-scroll="0"]) .site-header::before {
+		content: "";
+		display: inline-block;
+		position: absolute;
+		width: 100vw;
+		top: 0;
+		left: 50%;
+		right: 50%;
+		margin-left: -50vw;
+		margin-right: -50vw;
+		height: 100%;
+		z-index: -1;
 		background-color: #fff;
 	}
 
 	.edit-post-visual-editor__content-area .editor-styles-wrapper .site {
+		position: relative;
 		display: grid;
 		grid-template-columns: auto minmax(min-content, 30em) minmax(min-content, 30em) auto;
 		grid-auto-rows: min-content auto min-content min-content;
@@ -1343,12 +1363,8 @@ Add your custom styles in this file so it is easier to update the theme.
 		position: sticky;
 		top: 0;
 		z-index: 500;
-		display: grid;
+		width: 100%;
-		grid-template-areas: "main" "secondary ";
-		grid-row: auto;
-		align-items: center;
 		padding: 0.5rem 0;
-		width: 100vw;
 		background-color: transparent;
 	}
 
@@ -1443,8 +1459,23 @@ Add your custom styles in this file so it is easier to update the theme.
 
 @media screen and (min-width: 48em) {
 
+	.edit-post-visual-editor__content-area .editor-styles-wrapper html:not([data-scroll="0"]) .site-header::before {
+		content: "";
+		display: inline-block;
+		position: absolute;
+		width: 100vw;
+		top: 0;
+		left: 50%;
+		right: 50%;
+		margin-left: -50vw;
+		margin-right: -50vw;
+		height: 100%;
+		z-index: -1;
+		background-color: #fff;
+	}
+
 	.edit-post-visual-editor__content-area .editor-styles-wrapper .site > header {
-		grid-column: 1 / -1;
+		grid-column: 2 / 4;
 	}
 
 	.edit-post-visual-editor__content-area .editor-styles-wrapper .site > main {
@@ -1460,9 +1491,6 @@ Add your custom styles in this file so it is easier to update the theme.
 	}
 
 	.edit-post-visual-editor__content-area .editor-styles-wrapper .site-header {
-		display: grid;
-		grid-template-columns: auto minmax(min-content, 30em) minmax(min-content, 30em) auto;
-		grid-template-areas: "main  "  "secondary ";
 		margin: auto;
 		margin-bottom: 2rem;
 		padding: 0;
@@ -1480,7 +1508,7 @@ Add your custom styles in this file so it is easier to update the theme.
 	}
 
 	.edit-post-visual-editor__content-area .editor-styles-wrapper .site-main {
-		padding: 0 2rem;
+		padding: 0;
 	}
 
 	.edit-post-visual-editor__content-area .editor-styles-wrapper .site-main > section {
@@ -1568,8 +1596,8 @@ Add your custom styles in this file so it is easier to update the theme.
 		padding-left: 0;
 	}
 
-	.edit-post-visual-editor__content-area .editor-styles-wrapper .main-navigation ul ul.sub-menu,
+	.edit-post-visual-editor__content-area .editor-styles-wrapper .main-navigation ul .sub-menu,
-	.edit-post-visual-editor__content-area .editor-styles-wrapper .secondary-navigation ul ul.sub-menu {
+	.edit-post-visual-editor__content-area .editor-styles-wrapper .secondary-navigation ul .sub-menu {
 		padding-top: 0.5rem;
 		padding-left: 1rem;
 	}
@@ -1581,15 +1609,28 @@ Add your custom styles in this file so it is easier to update the theme.
 
 	.edit-post-visual-editor__content-area .editor-styles-wrapper .main-navigation a,
 	.edit-post-visual-editor__content-area .editor-styles-wrapper .secondary-navigation a {
-		display: flex;
-		align-items: center;
-		min-height: 100%;
 		text-decoration: none;
 		font-size: 1rem;
 	}
 
 	.edit-post-visual-editor__content-area .editor-styles-wrapper .main-navigation.toggled ul {
 		display: block;
+		margin: 0;
+		padding: 0;
+	}
+
+	.edit-post-visual-editor__content-area .editor-styles-wrapper .main-navigation.toggled ul .sub-menu {
+		padding: 0.5em;
+	}
+
+	.edit-post-visual-editor__content-area .editor-styles-wrapper .main-navigation.toggled li {
+		padding: 0;
+	}
+
+	.edit-post-visual-editor__content-area .editor-styles-wrapper .main-navigation.toggled a {
+		margin: 0;
+		padding: 0.5em;
+		display: block;
 	}
 
 	.edit-post-visual-editor__content-area .editor-styles-wrapper .main-navigation.toggled .main-navigation-content {
@@ -1693,17 +1734,6 @@ Add your custom styles in this file so it is easier to update the theme.
 	}
 }
 
-@media screen and (max-width: 47.99em) {
-
-	.edit-post-visual-editor__content-area .editor-styles-wrapper .main-navigation-content li {
-		padding: 0.5rem 0;
-	}
-
-	.edit-post-visual-editor__content-area .editor-styles-wrapper .secondary-navigation-content {
-		padding: 4rem 2rem;
-	}
-}
-
 @media screen and (min-width: 48em) {
 
 	.edit-post-visual-editor__content-area .editor-styles-wrapper {
@@ -1734,6 +1764,8 @@ Add your custom styles in this file so it is easier to update the theme.
 	.edit-post-visual-editor__content-area .editor-styles-wrapper .main-navigation ul .menu-item-has-children > ul,
 	.edit-post-visual-editor__content-area .editor-styles-wrapper .secondary-navigation ul .menu-item-has-children > ul {
 		background-color: rgba(255, 255, 255, 0.95);
+		box-shadow: -4px 4px 15px #999;
+		border-radius: 0.2em;
 	}
 
 	.edit-post-visual-editor__content-area .editor-styles-wrapper .main-navigation ul .sub-menu,
@@ -1743,6 +1775,8 @@ Add your custom styles in this file so it is easier to update the theme.
 		top: 100%;
 		left: -999em;
 		z-index: 99999;
+		padding-top: 0.5rem;
+		padding-left: 1rem;
 	}
 
 	.edit-post-visual-editor__content-area .editor-styles-wrapper .main-navigation ul .sub-menu ul,
@@ -1757,17 +1791,20 @@ Add your custom styles in this file so it is easier to update the theme.
 	.edit-post-visual-editor__content-area .editor-styles-wrapper .secondary-navigation ul .sub-menu li.focus > ul {
 		display: block;
 		left: 4em;
-		top: 1em;
+		top: 3em;
 	}
 
 	.edit-post-visual-editor__content-area .editor-styles-wrapper .main-navigation ul .sub-menu a,
 	.edit-post-visual-editor__content-area .editor-styles-wrapper .secondary-navigation ul .sub-menu a {
+		display: flex;
+		align-items: center;
+		min-height: 100%;
 		width: 200px;
 	}
 
 	.edit-post-visual-editor__content-area .editor-styles-wrapper .main-navigation ul li,
 	.edit-post-visual-editor__content-area .editor-styles-wrapper .secondary-navigation ul li {
-		padding: 0 1em;
+		padding: 1em;
 	}
 
 	.edit-post-visual-editor__content-area .editor-styles-wrapper .main-navigation ul li:hover > ul,
@@ -1787,11 +1824,6 @@ Add your custom styles in this file so it is easier to update the theme.
 
 	.edit-post-visual-editor__content-area .editor-styles-wrapper .main-navigation ul ul.sub-menu {
 		flex-direction: column;
-		padding: 0.5rem;
-	}
-
-	.edit-post-visual-editor__content-area .editor-styles-wrapper .main-navigation ul ul.sub-menu li {
-		margin: 0.5rem 0;
 	}
 
 	.edit-post-visual-editor__content-area .editor-styles-wrapper .main-navigation .current-menu-ancestor > a::after,
@@ -1800,8 +1832,7 @@ Add your custom styles in this file so it is easier to update the theme.
 		content: "";
 		position: absolute;
 		left: 1em;
-		bottom: -0.5em;
+		bottom: 0.5em;
-		min-height: 2px;
 		height: 2px;
 		width: calc(100% - 2em);
 		background-color: #000;
@@ -2151,6 +2182,7 @@ Add your custom styles in this file so it is easier to update the theme.
 	.edit-post-visual-editor__content-area .editor-styles-wrapper .single-xarxaprod-associat .xarxaprod-associat .xarxaprod-associat-info {
 		display: grid;
 		grid-template-columns: 1fr 1fr 1fr;
+		grid-template-columns: 1fr;
 		gap: 2rem;
 	}
 
@@ -2179,7 +2211,7 @@ Add your custom styles in this file so it is easier to update the theme.
 
 	.edit-post-visual-editor__content-area .editor-styles-wrapper .single-xarxaprod-associat .xarxaprod-associat .xarxaprod-associat-location .xarxaprod-associat-osm-link {
 		display: grid;
-		grid-template-columns: min-content auto;
+		grid-template-columns: auto;
 		align-items: center;
 	}
 
@@ -2285,7 +2317,7 @@ Add your custom styles in this file so it is easier to update the theme.
 		height: auto;
 		aspect-ratio: 1/1;
 		margin-bottom: 2em;
-		background-color: rgba(240, 240, 240, 0.2);
+		background-color: rgba(240, 240, 240, 0.4);
 		border-radius: 0.3em;
 	}
 
@@ -2404,6 +2436,14 @@ Add your custom styles in this file so it is easier to update the theme.
 		font-size: 1.5em;
 	}
 
+	.edit-post-visual-editor__content-area .editor-styles-wrapper .single-xarxaprod-associat .xarxaprod-associat .xarxaprod-associat-info {
+		grid-template-columns: 1fr 1fr 1fr;
+	}
+
+	.edit-post-visual-editor__content-area .editor-styles-wrapper .single-xarxaprod-associat .xarxaprod-associat .xarxaprod-associat-location .xarxaprod-associat-osm-link {
+		grid-template-columns: min-content auto;
+	}
+
 	.edit-post-visual-editor__content-area .editor-styles-wrapper .xarxaprod-agenda .xarxaprod-card-each {
 		flex-direction: row-reverse;
 	}

sass/base/elements/_links.scss

@@ -21,3 +21,19 @@ a {
 		outline: 0;
 	}
 }
+
+@media screen {
+}
+@media screen and (max-width: 48em) {
+  //only smaller than 48em
+	a {
+		overflow-wrap: anywhere;
+		word-break: normal;
+	}
+}
+@media screen and (min-width: 48em) {
+  //only bigger than 48em
+}
+@media screen and (min-width: 80em) {
+  //only bigger than 80rem
+}

sass/components/content/_posts-and-pages.scss

@@ -201,6 +201,7 @@
       .xarxaprod-associat-info {
         display: grid;
         grid-template-columns: 1fr 1fr 1fr;
+        grid-template-columns: 1fr;
         gap: $grid__gap * 2;
         .xarxaprod-associat-contact,
         .xarxaprod-associat-services {
@@ -233,7 +234,7 @@
         }
         .xarxaprod-associat-osm-link {
           display: grid;
-          grid-template-columns: min-content auto;
+          grid-template-columns: auto;
           align-items: center;
           h6,p,a {
             margin: 0.5em ;
@@ -336,7 +337,7 @@
       height: auto;
       aspect-ratio: 1/1;
       margin-bottom: 2em;
-      background-color: rgba(240,240,240,0.2);
+      background-color: rgba(240,240,240,0.4);
       border-radius: 0.3em;
     }
   }
@@ -452,6 +453,18 @@
     }
   }
   
+  .single-xarxaprod-associat {
+    .xarxaprod-associat {
+      .xarxaprod-associat-info {
+        grid-template-columns: 1fr 1fr 1fr;
+      }
+      .xarxaprod-associat-location { 
+        .xarxaprod-associat-osm-link {
+          grid-template-columns: min-content auto;
+        }
+      }
+    }
+  }
   .xarxaprod-agenda {
     .xarxaprod-card-each {
       flex-direction: row-reverse;

sass/components/navigation/_navigation.scss

@@ -17,22 +17,15 @@
 			list-style: none;
 			margin: 0;
 			padding-left: 0;
-
+      .sub-menu {
-      ul.sub-menu {
         padding-top: 0.5rem;
         padding-left: 1rem;
       }
 		}
 		li {
 			position: relative;
-			&:hover > a,
-			&.focus > a {
-			}
 		}
 		a {
-			display: flex;
-			align-items: center;
-			min-height: 100%;
 			text-decoration: none;
 			font-size: 1rem;
 		}
@@ -41,6 +34,22 @@
 	.main-navigation {
 	  &.toggled {
 	  	ul {
+	  		display: block;
+				margin:0;
+				padding:0;
+				.sub-menu {
+					padding: 0.5em;
+					a {
+					}
+				}
+
+	  	}
+			li {
+				padding: 0;
+			}
+			a {
+				margin:0;
+			  padding: 0.5em;
 			  display: block;
 			}
 	  	.main-navigation-content {
@@ -137,16 +146,16 @@
 	/* end of menu hidden*/
 
 }
-@media screen and (max-width: 47.99em) {
+@media screen and (max-width: 48em) {
 	.site-branding {
 	}
 	.main-navigation-content {
 		li {
-			padding: 0.5rem 0; 
+			//padding: 0.5rem 0; 
 		}
 	}
 	.secondary-navigation-content {
-		padding: 4rem 2rem;
+		//padding: 4rem 2rem;
 	}
 }
 @media screen and (min-width: 48em) {
@@ -166,6 +175,8 @@
 			flex-flow: row;
       .menu-item-has-children > ul {
 				background-color: rgba(255,255,255,0.95);
+				box-shadow: -4px 4px 15px #999;
+				border-radius: 0.2em;
 			}
 			.sub-menu {
 				float: left;
@@ -173,43 +184,35 @@
 				top: 100%;
 				left: -999em;
 				z-index: 99999;
+        padding-top: 0.5rem;
+        padding-left: 1rem;
 
 				ul {
 					left: -999em;
 					top: 0;
 				}
-
 				li {
-
 					&:hover > ul,
 					&.focus > ul {
 						display: block;
 						left: 4em;
-						top: 1em;
+						top: 3em;
 					}
 				}
-
 		    a {
+		    	display: flex;
+		    	align-items: center;
+		    	min-height: 100%;
 					width: 200px;
 				}
-
-				:hover > a,
-				.focus > a {
-				}
-
-				a:hover,
-				a.focus {
-				}
 			}
       li {
-			  padding: 0 1em;
+			  padding: 1em;
-        //order: 2;
 			  &:hover > ul,
 			  &.focus > ul {
 				  left: auto;
 			  }
         &.lang-item {
-          //order: 1;
         }
 			}
 		}
@@ -221,9 +224,9 @@
 			justify-content: end;
       ul.sub-menu {
         flex-direction: column;
-        padding: 0.5rem;
+        //padding: 0.5rem;
         li {
-          margin: 0.5rem 0;
+          //padding: 0.5rem;
         }
       }
 		}
@@ -233,8 +236,8 @@
 			content: "";
 			position: absolute;
 			left: 1em;
-			bottom: -0.5em;
+			bottom: 0.5em;
-			min-height: 2px;
+			//min-height: 0.2em;
 			height: 2px;
 			width: calc(100% - 2em);
 			background-color: $color__black;

sass/layouts/_no-sidebar.scss

@@ -1,12 +1,24 @@
 @media screen {
 	html:not([data-scroll='0']) {
-		.site-header {
+		.site-header:before {
+			content: "";
+			display:inline-block;
+			position: absolute;
+			width: 100vw;
+			top: 0;
+			left: 50%;
+			right: 50%;
+			margin-left: -50vw;
+			margin-right:-50vw;
+			height: 100%;
+			z-index: -1;
 		  background-color: $color__white;
 		}
 	}
 	.no-sidebar {
 	}
 	.site {
+		position: relative;
 		display: grid;
 		grid-template-columns: auto minmax(min-content, 30em) minmax(min-content, 30em) auto;
 		grid-auto-rows: min-content auto min-content min-content;
@@ -36,14 +48,8 @@
 		position: sticky;
 		top: 0;
 		z-index: 500;
-		display: grid;
+		width: 100%;
-    grid-template-areas:
-		  "main"
-			"secondary ";
-		grid-row: auto;
-    align-items: center;
     padding: 0.5rem 0;
-    width: 100vw;
 		background-color: transparent;
 
 		.main {
@@ -124,10 +130,27 @@
 }
 @media screen and (min-width: 48em) {
 	//only bigger than 48em
+	html:not([data-scroll='0']) {
+		.site-header:before {
+			content: "";
+			display:inline-block;
+			position: absolute;
+			width: 100vw;
+			top: 0;
+			left: 50%;
+			right: 50%;
+			margin-left: -50vw;
+			margin-right:-50vw;
+			height: 100%;
+			z-index: -1;
+		  background-color: $color__white;
+		}
+	}
 	.site {
 		//grid-template-columns: 1fr 2fr 2fr 1fr;
 		> header {
-			grid-column: 1 / -1;
+			//grid-column: 1 / -1;
+			grid-column: 2 / 4;
 		}
 		> main {
 			grid-column: 2 / 4;
@@ -140,11 +163,6 @@
 		}
 	}
 	.site-header {
-		display: grid;
-		grid-template-columns: auto minmax(min-content, 30em) minmax(min-content, 30em) auto;
-    grid-template-areas:
-      "main  " 
-      "secondary "; 
     margin: auto;
 		margin-bottom: 2rem;
     padding: 0;
@@ -160,7 +178,7 @@
 		}
 	}
 	.site-main {
-		padding: 0 2rem;
+		padding: 0;
 		> section {
 			padding: 4em 0;
 		}

style.css

@@ -1019,6 +1019,14 @@ a:active {
 	outline: 0;
 }
 
+@media screen and (max-width: 48em) {
+
+	a {
+		overflow-wrap: anywhere;
+		word-break: normal;
+	}
+}
+
 /* Forms
 --------------------------------------------- */
 button,
@@ -1167,11 +1175,23 @@ textarea {
 --------------------------------------------------------------*/
 @media screen {
 
-	html:not([data-scroll="0"]) .site-header {
+	html:not([data-scroll="0"]) .site-header::before {
+		content: "";
+		display: inline-block;
+		position: absolute;
+		width: 100vw;
+		top: 0;
+		left: 50%;
+		right: 50%;
+		margin-left: -50vw;
+		margin-right: -50vw;
+		height: 100%;
+		z-index: -1;
 		background-color: #fff;
 	}
 
 	.site {
+		position: relative;
 		display: grid;
 		grid-template-columns: auto minmax(min-content, 30em) minmax(min-content, 30em) auto;
 		grid-auto-rows: min-content auto min-content min-content;
@@ -1202,12 +1222,8 @@ textarea {
 		position: sticky;
 		top: 0;
 		z-index: 500;
-		display: grid;
+		width: 100%;
-		grid-template-areas: "main" "secondary ";
-		grid-row: auto;
-		align-items: center;
 		padding: 0.5rem 0;
-		width: 100vw;
 		background-color: transparent;
 	}
 
@@ -1302,8 +1318,23 @@ textarea {
 
 @media screen and (min-width: 48em) {
 
+	html:not([data-scroll="0"]) .site-header::before {
+		content: "";
+		display: inline-block;
+		position: absolute;
+		width: 100vw;
+		top: 0;
+		left: 50%;
+		right: 50%;
+		margin-left: -50vw;
+		margin-right: -50vw;
+		height: 100%;
+		z-index: -1;
+		background-color: #fff;
+	}
+
 	.site > header {
-		grid-column: 1 / -1;
+		grid-column: 2 / 4;
 	}
 
 	.site > main {
@@ -1319,9 +1350,6 @@ textarea {
 	}
 
 	.site-header {
-		display: grid;
-		grid-template-columns: auto minmax(min-content, 30em) minmax(min-content, 30em) auto;
-		grid-template-areas: "main  "  "secondary ";
 		margin: auto;
 		margin-bottom: 2rem;
 		padding: 0;
@@ -1339,7 +1367,7 @@ textarea {
 	}
 
 	.site-main {
-		padding: 0 2rem;
+		padding: 0;
 	}
 
 	.site-main > section {
@@ -1426,8 +1454,8 @@ textarea {
 		padding-left: 0;
 	}
 
-	.main-navigation ul ul.sub-menu,
+	.main-navigation ul .sub-menu,
-	.secondary-navigation ul ul.sub-menu {
+	.secondary-navigation ul .sub-menu {
 		padding-top: 0.5rem;
 		padding-left: 1rem;
 	}
@@ -1439,15 +1467,28 @@ textarea {
 
 	.main-navigation a,
 	.secondary-navigation a {
-		display: flex;
-		align-items: center;
-		min-height: 100%;
 		text-decoration: none;
 		font-size: 1rem;
 	}
 
 	.main-navigation.toggled ul {
 		display: block;
+		margin: 0;
+		padding: 0;
+	}
+
+	.main-navigation.toggled ul .sub-menu {
+		padding: 0.5em;
+	}
+
+	.main-navigation.toggled li {
+		padding: 0;
+	}
+
+	.main-navigation.toggled a {
+		margin: 0;
+		padding: 0.5em;
+		display: block;
 	}
 
 	.main-navigation.toggled .main-navigation-content {
@@ -1554,17 +1595,6 @@ textarea {
 	/* end of menu hidden*/
 }
 
-@media screen and (max-width: 47.99em) {
-
-	.main-navigation-content li {
-		padding: 0.5rem 0;
-	}
-
-	.secondary-navigation-content {
-		padding: 4rem 2rem;
-	}
-}
-
 @media screen and (min-width: 48em) {
 
 	.custom-logo {
@@ -1585,6 +1615,8 @@ textarea {
 	.main-navigation ul .menu-item-has-children > ul,
 	.secondary-navigation ul .menu-item-has-children > ul {
 		background-color: rgba(255, 255, 255, 0.95);
+		box-shadow: -4px 4px 15px #999;
+		border-radius: 0.2em;
 	}
 
 	.main-navigation ul .sub-menu,
@@ -1594,6 +1626,8 @@ textarea {
 		top: 100%;
 		left: -999em;
 		z-index: 99999;
+		padding-top: 0.5rem;
+		padding-left: 1rem;
 	}
 
 	.main-navigation ul .sub-menu ul,
@@ -1608,17 +1642,20 @@ textarea {
 	.secondary-navigation ul .sub-menu li.focus > ul {
 		display: block;
 		left: 4em;
-		top: 1em;
+		top: 3em;
 	}
 
 	.main-navigation ul .sub-menu a,
 	.secondary-navigation ul .sub-menu a {
+		display: flex;
+		align-items: center;
+		min-height: 100%;
 		width: 200px;
 	}
 
 	.main-navigation ul li,
 	.secondary-navigation ul li {
-		padding: 0 1em;
+		padding: 1em;
 	}
 
 	.main-navigation ul li:hover > ul,
@@ -1638,11 +1675,6 @@ textarea {
 
 	.main-navigation ul ul.sub-menu {
 		flex-direction: column;
-		padding: 0.5rem;
-	}
-
-	.main-navigation ul ul.sub-menu li {
-		margin: 0.5rem 0;
 	}
 
 	.main-navigation .current-menu-ancestor > a::after,
@@ -1651,8 +1683,7 @@ textarea {
 		content: "";
 		position: absolute;
 		left: 1em;
-		bottom: -0.5em;
+		bottom: 0.5em;
-		min-height: 2px;
 		height: 2px;
 		width: calc(100% - 2em);
 		background-color: #000;
@@ -1980,6 +2011,7 @@ textarea {
 	.single-xarxaprod-associat .xarxaprod-associat .xarxaprod-associat-info {
 		display: grid;
 		grid-template-columns: 1fr 1fr 1fr;
+		grid-template-columns: 1fr;
 		gap: 2rem;
 	}
 
@@ -2008,7 +2040,7 @@ textarea {
 
 	.single-xarxaprod-associat .xarxaprod-associat .xarxaprod-associat-location .xarxaprod-associat-osm-link {
 		display: grid;
-		grid-template-columns: min-content auto;
+		grid-template-columns: auto;
 		align-items: center;
 	}
 
@@ -2130,7 +2162,7 @@ textarea {
 		height: auto;
 		aspect-ratio: 1/1;
 		margin-bottom: 2em;
-		background-color: rgba(240, 240, 240, 0.2);
+		background-color: rgba(240, 240, 240, 0.4);
 		border-radius: 0.3em;
 	}
 
@@ -2251,6 +2283,14 @@ textarea {
 		font-size: 1.5em;
 	}
 
+	.single-xarxaprod-associat .xarxaprod-associat .xarxaprod-associat-info {
+		grid-template-columns: 1fr 1fr 1fr;
+	}
+
+	.single-xarxaprod-associat .xarxaprod-associat .xarxaprod-associat-location .xarxaprod-associat-osm-link {
+		grid-template-columns: min-content auto;
+	}
+
 	.xarxaprod-agenda .xarxaprod-card-each {
 		flex-direction: row-reverse;
 	}