.page-content-article {
	display: grid;
  grid-template-columns: repeat(1,minmax(0,1fr));
  gap: 20px;
}
.page-content-article header,
.page-content-article .pager,
.page-content-article .contextual {
	grid-column:span 1;
	text-align:center;
	text-transform:uppercase;
}
.page-content-article header a {
	color:#333;
}

.selected-content-wrap {
	position:relative;
}
.page-content-article .views-field-field-image img {
	width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  margin: 0;
}
.page-content-article .views-field-title {
  padding:10px;
  background:url(/sites/default/files/web-icons/bg-alpha-60.png);
}
.page-content-article .views-field-title h3 {
	font-size:1em;
}
.page-content-article .views-field-title a {
	font-family: "Noto Sans Thai Looped", sans-serif;
	color:#fff;
	font-weight:500;
}



@media screen and (min-width:768px) {

	.page-content-article {
		display: grid;
	  grid-template-columns: repeat(2,minmax(0,1fr));
	  gap: 20px;
	}
	.page-content-article header,
	.page-content-article .pager,
	.page-content-article .contextual {
		grid-column: span 2;
	}

	.page-content-article .views-field-title h3 {
		font-size:1.1em;
	}

}


@media screen and (min-width:992px) {

	.page-content-article {
		display: grid;
	  grid-template-columns: repeat(4,minmax(0,1fr));
	  gap: 20px;
	}
	.page-content-article header,
	.page-content-article .pager,
	.page-content-article .contextual {
		grid-column: span 4;
	}

	.page-content-article .views-field-title h3 {
		font-size:1.2em;
	}
	
}