<section>
	<div class="container">
		<div class="column">Column 1</div>
		<div class="column"> Column 2</div>
		<div class="column"> Column 3</div>
	</div>
</section>

body {
	background-color: #000;
	height: 100%;
	color: #fff;
	font-family: 'Inter',sans-serif;
	padding: 4em;
}

section, .container, .column {
	background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2) 9px, transparent 9px, transparent 15px, rgba(255, 255, 255, 0.2) 15px), repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2) 9px, transparent 9px, transparent 15px, rgba(255, 255, 255, 0.2) 15px), repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2) 9px, transparent 9px, transparent 15px, rgba(255, 255, 255, 0.2) 15px), repeating-linear-gradient(270deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2) 9px, transparent 9px, transparent 15px, rgba(255, 255, 255, 0.2) 15px);
	background-size: 2px 100%, 100% 2px, 2px 100% , 100% 2px;
	background-position: 0 0, 0 0, 100% 0, 0 100%;
	background-repeat: no-repeat;
	background-color: rgba(255, 255, 255, 0.055);
	box-sizing: border-box;
}
section:before {
	content: "Section";
	position: absolute;
	top: -24px;
	left: 0;
}
.container:before {
	content: "Container";
	position: absolute;
	top: -24px;
	left: 0;
}
.container {
	padding: 40px 16px;
}

section {
	padding: 80px 16px;
	position: relative;
	width: 100%;
	display: flex;
}

.container {
	display: flex;
	flex-wrap: wrap;
	position: relative;
	width: 100%;
	max-width: 1140px;
	margin: 0 auto;
	gap: 24px;
}

.column {
	width: 100%;
	max-width: 100%;
	padding: 40px 12px;
	flex: 0 0 calc(33.33% - 16px);
}

@media (max-width: 1024px) {
	.column {
		wdith: 50%;
		flex: 0 0 calc(50% - 16px);
	}
}

@media (max-width: 991px) {
	.column {
		wdith: 100%;
		flex: 0 0 calc(100% - 16px);
	}
}