.mega-row{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	box-sizing: border-box;
}
.mega-col{
	display: block;
	min-width: 0; /* stops long words and images widening a track */
	box-sizing: border-box;
}
.mega-col > *:last-child{ margin-bottom: 0; }

/* The builder shows an outline while editing so empty rows are visible. */
.vc_editor .mega-row,
.compose-mode .mega-row{ outline: 1px dashed rgba(0,0,0,.18); outline-offset: 2px; }

/* ---------- A column that is clickable as a whole ---------- */

/* The column is the link itself wherever nothing inside it is clickable. */
a.mega-col{
	display: block;
	color: inherit;
	text-decoration: none;
}
a.mega-col:focus-visible{ outline: 2px solid currentColor; outline-offset: 3px; }

/* Otherwise a layer goes over the column. isolate keeps the theme's own
   positioned markup from stacking above it. */
.mega-col-linked{ position: relative; isolation: isolate; }

.mega-cover-link{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 5;
	border-radius: inherit;
	text-decoration: none;
	font-size: 0;
	pointer-events: auto;
}
.mega-cover-link:focus-visible{
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* Anything the reader can act on stays above that layer. */
.mega-col-linked a:not(.mega-cover-link),
.mega-col-linked button,
.mega-col-linked input,
.mega-col-linked select,
.mega-col-linked textarea,
.mega-col-linked label,
.mega-col-linked summary,
.mega-col-linked iframe,
.mega-col-linked video,
.mega-col-linked audio,
.mega-col-linked .mega-btn-wrap{
	position: relative;
	z-index: 6;
}