General Questions/New to Joomla! 5.x • Re: horizontally arrange modules that are in the same position

Code:

:root {--dark-color: #1b2739;--light-color: #ffffff;--main-background: #fafafa;--primary-background: #002829;--primary-textColor: #ffffff;--secondary-background: #008f02;--secondary-textColor: #ffffff;--secondary-color:  #ffffff;--accent-background: #e69100;--accent-textColor: #ffffff;--primary-gradient: linear-gradient(180deg, #002829, #003332);--secondary-gradient: linear-gradient(180deg, #003332, #002829);}body {background: var(--main-background); /* background of your website */color: var(--main-color); /* color of your website */}a {color: var(--secondary-background); /* color of your links */}.container-header {background-color: var(--primary-background); /* Solid background of your header */background-image: var(--primary-gradient);  /* Set to none if you want to disable the gradient */}.mod-articlesnews-horizontal li, .no-card .newsflash-horiz li {background-color: var(--primary-background); /* Solid background of your articlesnews or newsflash modules */color: var(--primary-color);  /* Color of your articlesnews or newsflash modules */border: 1px solid var(--primary-background); /* Border of your articlesnews or newsflash modules */}.btn.btn-primary {background-color: var(--primary-background); /* background of your primary buttons */border-color: var(--primary-background); /* border color of your primary buttons */color: var(--primary-textColor); /* text color of your primary buttons */}.mod-articlesnews-horizontal li .btn.btn-secondary, .no-card .newsflash-horiz li .btn.btn-secondary {background-color: var(--accent-background); /* background of your primary buttons */border-color: var(--accent-background); /* border color of your primary buttons */color: var(--dark-color); /* text color of your primary buttons */}.btn.btn-secondary {background-color: var(--secondary-background); /* background of your secondary buttons */border-color: var(--secondary-background); /* border color of your secondary buttons */color: var(--secondary-textColor); /* text color of your secondary buttons */}.bg-info {color: var(--accent-textColor);background-color: var(--accent-background) !important;}.card {border: 1px solid var(--primary-background); /* border color of your cards */border-radius: 0; /* border radius of your cards */background-color: var(--primary-background); /* background color of your cards */}.card-header {background-color: var(--primary-background); /* background color of your card headers */border-bottom: 1px solid var(--primary-background); /* border color of your card headers */color: var(--primary-textColor); /* text color of your card headers */}.card-body {background-color: var(--primary-background) !important; /* background color of your card bodies (Joomla Modules) */border-bottom: 3px solid var(--accent-background); /* border color of your card bodies */color: var(--primary-textColor); /* text color of your card bodies */}.card-body a {color: var(--primary-textColor); /* text color of your card body links */}.card.secondary {border: 1px solid var(--secondary-background); /* border color of your secondary cards */border-radius: 0; /* border radius of your secondary cards */background-color: var(--secondary-background); /* background color of your secondary cards */}.card-header.secondary {background-color: var(--secondary-background); /* background color of your secondary card headers */border-bottom: 1px solid var(--secondary-background); /* border color of your  secondary card headers */color: var(--secondary-textColor); /* text color of your card headers */}.card-body.secondary {background-color: var(--secondary-background); /* background color of your secondary card bodies (Joomla Modules) */border-bottom: 3px solid var(--secondary-background); /* border color of your secondary card bodies */color: var(--secondary-textColor); /* text color of your secondary card bodies */}.card-body.secondary a {color: var(--secondary-textColor); /* text color of your secondary card body links */}.plg_system_webauthn_login_button svg {fill: var(--primary-color); /* color of your webauthn login button icon */}.footer {background-color: var(--secondary-background); /* background color of your footer */background-image: var(--secondary-gradient);  /* Set to none if you want to disable the gradient */color: var(--secondary-color); /* text color of your footer */}::selection {background-color: var(--accent-background); /* background color of your text selection */color: var(--dark-color); /* text color of your text selection */}.metismenu.mod-menu .metismenu-item > ul {background-color: var(--secondary-background); /* background color of your dropdown menu */border: 1px solid var(--secondary-background); /* border color of your dropdown menu */color: var(--secondary-color); /* text color of your dropdown menu */}.metismenu.mod-menu .metismenu-item > ul a {color: var(--secondary-color); /* text color of your dropdown menu links */}.main-top.card.colorpicker-module {background-color: var(--main-background); /* if you want to change the background color of a specific module add a Module Class in the advanced module settings and define it in your css */color: var(--dark-color); /* if you want to change the background color of a specific module add a Module Class in the advanced module settings and define it in your css */border: none;}.colorpicker-module .card-header, .colorpicker-module .card-body  {background-color: var(--main-background); /* if you want to change the background color of a specific module add a Module Class in the advanced module settings and define it in your css */color: var(--dark-color); /* if you want to change the background color of a specific module add a Module Class in the advanced module settings and define it in your css */}.article-info {background-color: var(--main-background); /* background color of your article info */padding: 15px 20px; /* padding of your article info */}.article-info dd {color: var(--main-color); /* text color of your article info */}.btn.btn-info {background-color: var(--primary-background); /* background color of your info buttons */border: 1px solid var(--main-background); /* border width, style and color of your info buttons */color: var(--primary-color); /* text color of your info buttons */}.btn-primary .icon-white:before {color: var(--primary-textColor); /* text color of your info buttons in primary */}.btn-secondary .icon-white:before {color: var(--secondary-textColor); /* text color of your info buttons in primary */}.form-control {background-color: var(--main-background); /* background color of your form controls */border: 1px solid var(--main-color); /* border color of your form controls */color: var(--primary-color); /* text color of your form controls */border-radius: 0; /* border radius of your form controls */}label {font-weight: bold; /* font weight of your labels */}/* generate a clamp font size for h1, in small viewports it should have 18px in large viewports 28px */h1, .h1 {font-size: clamp(18px, 5vw, 28px);}/* generate a clamp font size for h2, in small viewports it should have 16px in large viewports 26px */h2, .h2 {font-size: clamp(16px, 5vw, 26px);}/* generate a clamp font size for h3, in small viewports it should have 14px in large viewports 24px */h3, .h3 {font-size: clamp(14px, 5vw, 24px);}/* generate a clamp font size for h4, in small viewports it should have 12px in large viewports 22px */h4, .h4 {font-size: clamp(12px, 5vw, 22px);}div#hikashop_filter_main_div_module_123 .hikashop_filter_title + br {display: none;}div#hikashop_filter_main_div_module_123 .hikashop_filter_checkbox label {padding-bottom: 15px;}.hikabtn.hikashop_cart_proceed_to_checkout{ color: #353b41 !important; }.container-search {display: flex;justify-content: end;align-items: center;gap: 1em;}.container-search .search.card {margin: 0;}@media (max-width: 767px) {.site-grid {grid-template-areas: ". banner banner banner banner ." ". top-a top-a top-a top-a ." ". top-b top-b top-b top-b ."". side-r side-r side-r side-r ." ". comp comp comp comp ." ". side-l side-l side-l side-l ." ". bot-a bot-a bot-a bot-a ." ". bot-b bot-b bot-b bot-b .";}.hidden-mobile {display:none !important;}}

Code:

/*Breakpoints*//* Desktop First */@media (max-width: 1399.98px) {}@media (max-width: 1199.98px) {}@media (max-width: 991.98px) {}@media (max-width: 767.98px) {}@media (max-width: 575.98px) {}/* Mobile First */@media (min-width: 576px) {}@media (min-width: 768px) {}@media (min-width: 992px) {}@media (min-width: 1200px) {}@media (min-width: 1400px) {}