/* =========================================================
   SATUSPORT SPORT 2
   ========================================================= */

.satusport-sport-2 {
	width: 100%;
	box-sizing: border-box;
}

.satusport-sport-2 *,
.satusport-sport-2 *::before,
.satusport-sport-2 *::after {
	box-sizing: border-box;
}


/* =========================================================
   GRID UTAMA
   Desktop area konten = 3 kolom
   ========================================================= */

.satusport-sport-2-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px 20px;

	width: 100%;

	/* Jarak antara heading kategori dan card */
	margin: 15px 0 0;

	padding: 0;
}


/* =========================================================
   ITEM
   ========================================================= */

.satusport-sport-2-item {
	min-width: 0;
	width: 100%;
	overflow: hidden;
}


/* =========================================================
   GAMBAR
   ========================================================= */

.satusport-sport-2-image-link {
	display: block;
	width: 100%;
	overflow: hidden;
	text-decoration: none;
}

.satusport-sport-2-image {
	display: block;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;

	transition: transform 0.25s ease;
}

.satusport-sport-2-image-link:hover .satusport-sport-2-image {
	transform: scale(1.025);
}


/* =========================================================
   NO IMAGE
   ========================================================= */

.satusport-sport-2-no-image {
	display: flex;
	align-items: center;
	justify-content: center;

	background: #eeeeee;
	color: #777777;

	font-size: 12px;
}


/* =========================================================
   JUDUL
   ========================================================= */

.satusport-sport-2-title {
	display: -webkit-box;

	margin: 9px 0 0;
	padding: 0;

	font-size: 14px;
	line-height: 1.35;
	font-weight: 700;

	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;

	overflow: hidden;
	text-overflow: ellipsis;

	/*
	 * Mencegah kata panjang merusak lebar kolom.
	 */
	overflow-wrap: break-word;
	word-break: normal;
}

.satusport-sport-2-title a {
	display: block;

	max-width: 100%;

	color: inherit;
	text-decoration: none;

	overflow-wrap: break-word;
	word-break: normal;
}


/* =========================================================
   TANGGAL
   ========================================================= */

.satusport-sport-2-date {
	margin-top: 6px;

	font-size: 11px;
	line-height: 1.4;

	color: #888888;
}


/* =========================================================
   SIDEBAR DETAK
   =========================================================
   Sidebar terlalu sempit untuk 3 kolom.
   Kita gunakan 2 kolom.
   ========================================================= */

.sidebar-left .satusport-sport-2-grid,
.sidebar-right .satusport-sport-2-grid,
.sidebar-single .satusport-sport-2-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 12px;
}


/* =========================================================
   JIKA DETAK MENGGUNAKAN ID SIDEBAR
   ========================================================= */

#sidebar-left .satusport-sport-2-grid,
#sidebar-right .satusport-sport-2-grid,
#sidebar-single .satusport-sport-2-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 12px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

	.satusport-sport-2-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 22px 16px;
	}

	.satusport-sport-2-title {
		font-size: 15px;
		line-height: 1.35;
	}

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

	/*
	 * Beri ruang kiri-kanan 20px.
	 */
	.satusport-sport-2 {
		width: calc(100% - 40px) !important;

		margin-left: 10px !important;
		margin-right: 10px !important;

		box-sizing: border-box !important;
	}


	/*
	 * Tetap 2 kolom.
	 */
	.satusport-sport-2-grid {
    	display: grid !important;
    
    	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    
    	gap: 20px 12px !important;
    
    	width: 100% !important;
    
    	/* Jarak heading LIGA INGGRIS ke gambar */
    	margin: 6px 0 0 !important;
    
    	padding: 0 !important;
    }

	/*
	 * Item tidak boleh melebar.
	 */
	.satusport-sport-2-item {
		min-width: 0 !important;
		max-width: 100% !important;
		overflow: hidden !important;
	}


	/*
	 * Gambar.
	 */
	.satusport-sport-2-image {
		width: 100% !important;
		max-width: 100% !important;

		aspect-ratio: 16 / 9;

		object-fit: cover;
	}


	/*
	 * Judul maksimal 3 baris.
	 */
	.satusport-sport-2-title {
		margin-top: 7px !important;

		font-size: 14px !important;
		line-height: 1.35 !important;
		font-weight: 700;

		display: -webkit-box !important;

		-webkit-box-orient: vertical !important;
		-webkit-line-clamp: 3 !important;

		overflow: hidden !important;
		text-overflow: ellipsis !important;

		overflow-wrap: break-word !important;
		word-break: normal !important;
	}


	.satusport-sport-2-title a {
		display: block !important;

		max-width: 100% !important;

		overflow-wrap: break-word !important;
		word-break: normal !important;
	}


	/*
	 * Tanggal.
	 */
	.satusport-sport-2-date {
		margin-top: 5px !important;

		font-size: 10px !important;
		line-height: 1.35 !important;
	}

}