Make the banner ads more responsive, add a hover effect, consistent layout and scaling on mobile.

j-banners 

/* ============================================================
 J-BANNERS: Responsive Layout & Hover Effects
 ============================================================ */

/* Container and Layout */
.j-banners {
 display: flex;
 justify-content: center;
 padding: 1.5rem 0;
}

.j-banners table {
 width: 100% !important;
 border: none !important;
 margin: 0 auto;
}

.j-banners .g-content {
 padding: 0;
 margin: 0;
}

.j-banners tbody {
 display: flex;
 flex-direction: column;
 gap: 1rem;
 width: 100%;
}

/* Row Styling - Default Centered */
.j-banners tr {
 display: flex !important;
 flex-direction: row;
 flex-wrap: wrap;
 justify-content: center;
 align-items: center; /* Default vertical centering */
 gap: 1rem;
 row-gap: 1rem;
 width: 100%;
}

/* --- SITE-SUB SPECIFIC OVERRIDE --- */
/* Aligns banners to the top instead of center on sub-pages */
.site-sub .j-banners tr {
 align-items: flex-start !important;
}

/* Cell and Link Styling */
.j-banners td {
 display: block !important;
 padding: 0 !important;
 border: none !important;
 width: auto !important;
 max-width: 100% !important;
}

.j-banners td > div,
.j-banners td > div > div {
 max-width: 100% !important;
 width: auto !important;
 height: auto !important;
 margin: 0 auto;
}

.j-banners td > div > div {
 display: grid !important;
}

.j-banners a {
 grid-area: 1 / 1;
 width: 100%;
 height: 100%;
 display: block;
}

/* Image and Effects */
.j-banners img {
 position: relative !important;
 display: block;
 max-width: 100% !important;
 width: auto !important;
 height: auto !important;
 object-fit: contain;
 margin: 0 auto;
 transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s ease;
 backface-visibility: hidden;
 transform: translateZ(0);
 border-radius: 2px;
}

/* Hover Effect: Lift and Shadow */
.j-banners a:hover img {
 transform: translateY(-6px) translateZ(0);
 /* Uses a soft shadow; if you have a variable for primary color, you can use:
 box-shadow: 0 8px 20px rgba(var(--primary-color-rgb), 0.3); */
 box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* ============================================================
 MOBILE RESPONSIVE STYLES (Breakpoint: 50.99rem / ~815px)

 Two HTML structures exist inside .j-banners:
 - Horizontal banners (.admod): one <tr> with multiple <td>s
 - Side banners (.adside): multiple <tr>s each with one <td>
 The mobile rules are scoped separately so both wrap correctly.
 ============================================================ */

@media (max-width: 50.99rem) {
 .j-banners {
 padding: 0.5rem 0;
 }

 .j-banners table {
 display: block !important;
 width: 100% !important;
 }

 /* Both layouts: tbody is the flex container for wrapping */
 .j-banners tbody {
 display: flex !important;
 flex-direction: row !important;
 flex-wrap: wrap !important;
 justify-content: center !important;
 align-items: flex-start !important;
 gap: 0.75rem !important;
 width: 100% !important;
 box-sizing: border-box !important;
 padding: 0 0.75rem !important;
 }

 /* Horizontal banners (.admod): single tr with multiple tds — wrap tds side-by-side */
 .j-banners:not(:has(.adside)) tr {
 display: flex !important;
 flex-direction: row !important;
 flex-wrap: wrap !important;
 justify-content: center !important;
 width: 100% !important;
 box-sizing: border-box !important;
 margin: 0 !important;
 padding: 0 !important;
 }

 /* Side banners (.adside): multiple trs, one td each — let tbody wrap them side-by-side */
 .j-banners:has(.adside) tr {
 display: block !important;
 width: auto !important;
 }

 .j-banners td {
 display: flex;
 justify-content: center;
 width: 100%;
 }

 /* Force scaling for fixed-width containers commonly found in TinyMCE */
 .j-banners div[style*="width: 330px"],
 .j-banners div[style*="width:330px"] {
 max-width: 100% !important;
 width: 100% !important;
 }

 .j-banners img {
 width: 100% !important;
 height: auto !important;
 }
}