/*
==================================================
ABOUT
Mazury Hip Hop Festival Premium
==================================================
*/


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

.about {

    position:relative;
    padding-block:var(--section-padding);
    overflow:hidden;

    background:
    radial-gradient(
        circle at 15% 10%,
        rgba(255,0,120,.14),
        transparent 45%
    ),
    linear-gradient(
        180deg,
        #060913 0%,
        #250025 100%
    );

    color:#fff;

}

.about::after {

content:"";

position:absolute;

left:0;

bottom:-1px;

width:100%;

height:120px;

background:

linear-gradient(
    180deg,
    transparent 0%,
    #250025 100%
);

pointer-events:none;

z-index:2;

}


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

.about__container {

	position:relative;

	z-index:2;

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

	margin:auto;

	display:grid;

	grid-template-columns:1fr 1fr;

	gap:5rem;

	align-items:start;

}


/*==================================================
CONTENT
==================================================*/

.about__content {

	width:100%;

}


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

/*
The section-header component is global.

About only defines the context color.
Typography belongs to:
components/section-header.css
*/

.about .section-header {

	max-width:650px;

	margin-bottom:2.5rem;

	align-items:center;

	text-align:center;

	margin-left:auto;
	margin-right:auto;

	color:#fff;

}


/*==================================================
FEATURES
==================================================*/

.about__features {

	display:grid;

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

	gap:1.5rem;

	margin-top:2rem;

}


.about .card--feature {

	background:

		linear-gradient(
			145deg,
			rgba(255,255,255,.10),
			rgba(255,255,255,.03)
		);

	backdrop-filter:blur(10px);

	border-radius:24px;

	padding:1.5rem;

	box-shadow:
		0 15px 40px rgba(0,0,0,.08);

	border:
		1px solid rgba(255,255,255,.12);

	color:#fff;

}


/*==================================================
FEATURE ICON
==================================================*/

.about .card--feature .card__icon {

	width:45px;

	height:45px;

	display:flex;

	align-items:center;

	justify-content:center;

	border-radius:12px;

	background:

		linear-gradient(
			135deg,
			#ff0055,
			#ff7a00
		);

	color:#fff;

	margin-bottom:1rem;

}


.about .card--feature .card__icon svg {

	width:24px;

	height:24px;

	display:block;

	stroke-width:2.2;

}


/*==================================================
FEATURE CONTENT
==================================================*/

.about .card--feature .card__title {

	color:#fff;

	font-size:1.1rem;

	font-weight:800;

	margin-bottom:.5rem;

}


.about .card--feature .card__description {

	color:rgba(255,255,255,.65);

	line-height:1.6;

	margin:0;

}


/*==================================================
BUTTON
==================================================*/

.about__actions {

	margin-top:3rem;
	padding-bottom:0;

}


.about__actions .btn {

	box-shadow:
		0 15px 35px rgba(255,0,85,.35);
	
}


/*==================================================
MEDIA
==================================================*/

.about__media {

	position:relative;

}


.about__media::before {

	content:"";

	position:absolute;

	inset:-2px;

	border-radius:32px;

	background:

		linear-gradient(
			135deg,
			#ff0055,
			#ff7a00,
			#00d9ff
		);

	z-index:0;

	opacity:.8;

	filter:blur(.3px);

}


.about__media::after {

	content:"";

	position:absolute;

	width:120px;

	height:120px;

	right:-20px;

	bottom:-20px;

	background:

		linear-gradient(
			135deg,
			#ff0055,
			#ff7a00
		);

	border-radius:30px;

	z-index:0;

}


.about__image {

	position:relative;

	z-index:1;

	display:block;

	width:100%;

	height:520px;

	object-fit:cover;

	border-radius:30px;

	border:
		1px solid rgba(255,255,255,.15);

	box-shadow:

		0 30px 80px rgba(255,0,85,.18),

		0 20px 50px rgba(0,217,255,.12);

}


/*==================================================
RESPONSIVE
==================================================*/

@media (max-width:991px) {

	.about__container {

		grid-template-columns:1fr;

		gap:3rem;

	}


	.about__media {

		order:-1;

	}


	.about .section-header {

		text-align:center;

		margin-left:auto;

		margin-right:auto;

	}


	.about__features {

		grid-template-columns:1fr;

	}


	.about__image {

		height:450px;

	}

}


@media (max-width:600px) {

	.about__container {

		width:calc(100% - 2rem);

	}


	.about__image {

		height:350px;

	}


	.about__media::after {

		width:90px;

		height:90px;

		right:-20px;

		bottom:-20px;

	}

}