/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: May 14 2026 | 16:20:23 */
/* ── Grid ─────────────────────────────────────────── */
.mga-grid {
	display: grid;
	grid-template-columns: repeat(var(--mga-columns, 3), 1fr);
	gap: 1.5rem;
}

@media (max-width: 900px) {
	.mga-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
	.mga-grid { grid-template-columns: 1fr; }
}

/* ── Video wrapper ─────────────────────────────────── */
.mga-video-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	overflow: hidden;
}

/* ── Facade (thumbnail + play button) ─────────────── */
article.mga-item {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

h3.mga-title {
    color: #bf9874;
    font-size: 20px;
    line-height: 1.5;
}

p.mga-description {
    color: #fff;
}
/* Clamp description to 3 lines by default */
.mga-description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

/* When expanded, remove the clamp */
.mga-description-wrap.is-expanded .mga-description {
    display: block;
    overflow: visible;
}

/* Hide the button when text isn't long enough to clamp */
.mga-description-wrap.mga-no-clamp .mga-read-more {
    display: none;
}
button.mga-read-more {
    background: transparent;
    border: 0;
    color: #bf9874;
    padding: 10px 0 0 0 !important;
    font-family: 'DM Sans';
    cursor: pointer;
}
.mga-facade {
	position: absolute;
	inset: 0;
	background-color: #111;
	background-size: cover;
	background-position: center;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mga-play-btn {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	width: 68px;
	height: 48px;
	transition: transform 0.15s ease, opacity 0.15s ease;
}

.mga-facade:hover .mga-play-btn,
.mga-facade:focus .mga-play-btn {
	transform: scale(1.1);
	opacity: 0.9;
}

.mga-play-bg   { fill: rgba(33, 33, 33, 0.85); }
.mga-play-arrow { fill: #fff; }

/* ── Loaded iframe ─────────────────────────────────── */
.mga-iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: none;
}

/* ── Native video ──────────────────────────────────── */
.mga-native-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ── Loading state ─────────────────────────────────── */
.mga-facade--loading::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
}