crbdev

/* =========================
   Job Card
   ========================= */
/* Remove borders from all inner columns inside a single entry */
.gv-layout-builder-view.gv-layout-builder-view--entry [class^="gv-grid-col-"] {
  border: none !important;
}

.gv-layout-builder-view.gv-layout-builder-view--entry {
  border: 1px solid #e5e7eb;

crbdev

/* Masonry container */
.gv-container {
  columns: 320px;        /* target ~320px column width (auto-fit) */
  column-gap: 1rem;      /* horizontal gutter between columns */
}

/* Cards: don't split; let them flow into columns */
.gv-container .gv-layout-builder-view {
  break-inside: avoid;
  display: inline-block; /* required for column masonry */

crbdev

<!-- 
Place the HTML in a Custom Content field and replace the merge tags with your own.
You can then plce the CSS inside the "Custom Code" panel in the View settings.
-->

<div class="contact-card">
	<div class="contact-header">
		<h2>{Name (Name):1.3} {Name (Name):1.6}</h2>
		<p class="position">{Job Title:3}</p>
</div>

crbdev

.gv-list-view {border:none !important;}

/* Grid container */
.gv-list-view-content {
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-left: 5px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);

crbdev

/* Modern Table Styling */
table.gv-table-view {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 16px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

crbdev

[gvlogic if="{Priority:3}" is="1st Priority"]
    <span class="gk-priority gk-priority-critical">{Priority:3}</span>
[/gvlogic]

[gvlogic if="{Priority:3}" is="2nd Priority"]
    <span class="gk-priority gk-priority-high">{Priority:3}</span>
[/gvlogic]

[gvlogic if="{Priority:3}" is="3rd Priority"]
    <span class="gk-priority gk-priority-medium">{Priority:3}</span>

crbdev

<div class="total-raised-container">
	<div class="total-raised">
  		<span class="raised-amount">
		<!-- replace the form ID and merge tag with your own -->
    		$[gravitymath scope="form" id="3"] {Donation amount:5:sum} [/gravitymath] 
  		</span>
  		<span class="raised-text">Total Raised</span>
	</div>
</div>

crbdev

.gv-diy-multiple-container.gv-container {
	display:flex;
	flex-wrap: wrap;
	justify-content:center;
	margin-top:20px;
}

.gv-container img { width:100% !important; }	
	
.gv-diy-multiple-container.gv-container .gv-diy-view {

crbdev

#gv-view-2303-1 .gv-list-multiple-container {
	display:flex;
	flex-wrap: wrap;
	justify-content:center;
	margin-top:20px;
}

#gv-view-2303-1 .gv-list-multiple-container img {
	max-width:70% !important;
	margin: 0 auto;

crbdev

<div class="video-container">
    <iframe class="video" src="https://www.youtube.com/embed/yekXIobF3fk" allowfullscreen></iframe>
</div>

<style>
.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
}