/* HEADER */ #PageMain { margin-top: 0; }

/* FOOTER */ #PageFooter { margin-top: 0; }

/* Drop this into your site CSS and add the class to the section: four-squares-fullwidth */
.four-squares-fullwidth {
 --gap: 12px; /* adjust gutter between squares */
 --pad: 12px; /* container padding at left/right */
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: var(--gap);
 padding: var(--pad);
 box-sizing: border-box;
 align-items: stretch;
 width: 100%;
 overflow: visible;
}

/* Make each item a square and ensure media covers correctly */
.four-squares-fullwidth > * {
 width: 100%;
 box-sizing: border-box;
}

.four-squares-fullwidth img,
.four-squares-fullwidth .card {
 display: block;
 width: 100%;
 aspect-ratio: 1 / 1; /* keeps items perfect squares */
 object-fit: cover;
 height: auto;
}