/* ==================================================
COUNTDOWN SECTION
Mazury Hip Hop Festival Premium
================================================== */


/* ==================================================
SECTION
================================================== */

.countdown {

position:relative;

padding-top:120px;

color:#fff;
	
background:

linear-gradient(
    180deg,
    #250025 0%,
    #101735 35%,
    #060913 100%
);

}

.countdown::before {

    content:"";

    position:absolute;

    top:-120px;
    left:0;

    width:100%;
    height:120px;

    background:linear-gradient(
        180deg,
        transparent,
        #250025
    );

    pointer-events:none;

}

/* ==================================================
CONTAINER
================================================== */

.countdown__container {

	position:relative;
	
	z-index:2;

	width:
		min(
			calc(100% - 3rem),
			var(--container-width)
		);

	margin-inline:auto;

}


/* ==================================================
HEADER
================================================== */

.countdown__header {

	margin-bottom:2rem;

}


/* ==================================================
TIMER
================================================== */

.countdown__timer {

	display:grid;

	grid-template-columns:
		repeat(4,1fr);

	gap:1.5rem;

	width:100%;

	max-width:1080px;

	margin:0 auto;

	align-items:stretch;

}


/* ==================================================
DESCRIPTION
================================================== */

.countdown__description {

	max-width:700px;

	margin-inline:auto;

	color:inherit;

	font-size:1.1rem;

	line-height:1.7;

	text-align:center;

	opacity:.72;

}


/* ==================================================
FOOTER
================================================== */

.countdown__footer {

	margin-top:2.75rem;

	font-size:1.1rem;

	line-height:1.7;

	text-align:center;

	opacity:.82;

}


/* ==================================================
RESPONSIVE — TABLET
================================================== */

@media (max-width:1024px) {

	.countdown__timer {

		gap:1.15rem;

		max-width:900px;

	}

}


/* ==================================================
RESPONSIVE — MOBILE
================================================== */

@media (max-width:768px) {


	.countdown {

		padding-block:4.5rem;

		background:

			radial-gradient(
				circle at top,
				rgba(255,0,120,.12),
				transparent 40%
			),

			radial-gradient(
				circle at bottom,
				rgba(0,180,255,.10),
				transparent 45%
			),

			linear-gradient(
				180deg,
				#060913,
				#0b1022,
				#15031d
			);

	}


	/* ------------------------------------------
	   CONTAINER
	------------------------------------------ */

	.countdown__container {

		width:100%;

		max-width:420px;

		padding-inline:1rem;

		margin-inline:auto;

		box-sizing:border-box;

	}


	/* ------------------------------------------
	   HEADER
	------------------------------------------ */

	.countdown__header {

		margin-bottom:2.5rem;

	}


	/* ------------------------------------------
	   TIMER — 2 × 2
	------------------------------------------ */

	.countdown__timer {

		grid-template-columns:
			repeat(2,minmax(0,1fr));

		gap:.75rem;

		width:100%;

		max-width:none;

		align-items:stretch;

	}


	/* ------------------------------------------
	   ITEMS
	------------------------------------------ */

	.countdown__item {

		min-width:0;

		width:100%;

	}


	/* ------------------------------------------
	   DESCRIPTION
	------------------------------------------ */

	.countdown__description {

		max-width:340px;

		margin-inline:auto;

		font-size:1rem;

		line-height:1.7;

		text-align:center;

	}


	/* ------------------------------------------
	   FOOTER
	------------------------------------------ */

	.countdown__footer {

		margin-top:2.5rem;

		padding-bottom:1rem;

		font-size:1rem;

		line-height:1.7;

	}

}


/* ==================================================
RESPONSIVE — SMALL MOBILE
================================================== */

@media (max-width:480px) {


	.countdown {

		padding-block:4rem;

	}


	.countdown__container {

		padding-inline:.9rem;

	}


	.countdown__header {

		margin-bottom:2.25rem;

	}


	.countdown__timer {

		gap:.65rem;

	}


	.countdown__description {

		max-width:320px;

		font-size:.98rem;

	}


	.countdown__footer {

		margin-top:2.25rem;

		font-size:.98rem;

	}

}


/* ==================================================
VERY SMALL MOBILE
================================================== */

@media (max-width:360px) {


	.countdown__container {

		padding-inline:.75rem;

	}


	.countdown__timer {

		gap:.55rem;

	}

}