<div class="grid12">
  <h1 class="text">Lorem ipsum dolor sit amet</h1>
  
  <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>

  <ul class="grid12 cols-mob2 cols-pc4">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
  </ul>
</div>

/* 12-column grid */
.grid12 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.grid12 > * {
	grid-column: 1 / -1;
}

@media (min-width: 500px) {
	.grid12 {
		grid-template-columns: repeat(12, 1fr);
		gap: 30px;
	}
}

/* 12-column grid: number of columns */
.cols-mob2 > * {
	grid-column: span 2;
}


@media (min-width: 500px) {
	.cols-pc4 > * {
		grid-column: span 3;
	}
}

/* text span */
@media (min-width: 500px) {
	.text {
		grid-column: span 8;
	}
}

/* other */
body {
	margin: 40px 5vw;
	font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
h1, p, ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
li {
	display: grid;
	place-content: center;
	height: 100px;
	color: white;
	font-size: 30px;
}
li:nth-child(1) {
	background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
}
li:nth-child(2) {
	background-image: linear-gradient(120deg, #fccb90 0%, #d57eeb 100%);
}
li:nth-child(3) {
	background-image: linear-gradient(120deg, #9890e3 0%, #b1f4cf 100%);
}
li:nth-child(4) {
	background-image: linear-gradient(120deg, #fa709a 0%, #fee140 100%);
}