/* --- ABOUT PAGE ACCORDIONS --- */
.accordion-section {
	max-width: 90vw;
	margin: 0 auto;
	padding: 2rem 1rem;
}

.accordion-title {
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	position: relative;
	cursor: pointer;
	margin: 2rem 0 0.5rem;
	padding-bottom: 0.3rem;
	font-size: 1.3rem;
	border-bottom: 2px solid var(--accent2);
	width: 90%;
	transition: color 0.2s;
}

.accordion-title:hover {
	color: var(--accent1);
}

.accordion-content {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease, opacity 0.3s ease;
	opacity: 0;
	padding-left: 0rem;
    width: 90%;
	color: var(--fg);
}

.accordion.open .accordion-content {
	max-height: 9999px;
	opacity: 1;
	margin-top: 0.5rem;
}

.accordion-title {
	position: relative;
	padding-right: 1.5rem; /* zostaw miejsce na strzałkę */
}

.accordion-title.arrow-added::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid var(--accent2); /* strzałka w dół */
	transform: translateY(-50%) rotate(0deg);
	transition: transform 0.3s ease;
}

.accordion.open .accordion-title.arrow-added::before {
	transform: translateY(-50%) rotate(-180deg); /* obrót w górę przy rozwinięciu */
}

/* --- MEDIA --- */
@media (min-width: 100px) and (max-width: 370px) {
	.accordion-title {
		font-size: 1.3rem;
	}
	.accordion-content {
		font-size: 0.9rem;
	}
}

/* --- IMAGES --- */

.image-wrapper {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    width: 95%;
    max-width: 750px;
    margin: 1.5rem 0rem;
}

.image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 5px;
    box-shadow: 0 0 5px #0008;
}