.carousel-container {
	&.carousel-container-1 {
		.carousel-controls {
			display: none;
		}
		a.btn {
			display: none;
		}
		@media screen and (min-width: 720px) {
			.carousel {
				justify-content: center;
				.carousel-item {
					max-width: 370px;
				}
			}
		}
	}
}
.charities {
	padding: 0 20px 20px 20px;
	display: flex;
	flex-direction: column;
	gap: 30px;
	.title {
		max-width: 335px;
		margin: 0 auto;
		.background-brush-text {
			background-color: var(--color-purple);
		}
	}
	.carousel-item {
		.card {
			background-color: var(--color-white);
			border-radius: 16px;
			box-shadow: 6px 6px var(--color-eggshell);
			overflow: hidden;
			height: 400px;
			display: flex;
			flex-direction: column;
			.card-header {
				position: relative;
				height: 184px;
				.feature-card__image img {
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					min-width: 100%;
					min-height: 100%;
					position: absolute;
					mask: url("../../../images/components/mask/charity-image-mask-ZbMguW-.svg") no-repeat;
					mask-repeat: repeat;
					mask-size: auto 100%;
					object-fit: cover;
					height: 100%;
				}
			}
			.card-content {
				--line-height: 22px;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				gap: 1em;
				padding: 1rem 1rem 0 1rem;
				line-height: var(--line-height);
				font-weight: 700;
				font-size: 18px;
				.description {
					font-size: 14px;
					font-weight: 400;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 4;
					overflow: hidden;
					height: calc(4 * var(--line-height));

					> * {
						margin: 0;
					}

					ul,
					ol {
						padding-left: 1.25rem;
					}

					ul {
						list-style-type: disc;
						list-style-position: outside;
					}

					li + li {
						margin-top: 0.125rem;
					}
				}
			}
			.card-footer {
				padding: 1rem;
				font-size: 14px;
				font-weight: 700;
				a {
					color: var(--color-carbone)
				}
			}
		}
	}
		.charity-details-modal {
			.modal__content {
				gap: 0;
			}

			.modal__content > * {
				padding-left: 0;
				padding-right: 0;
			}

			.modal__content__header.charity-details-modal__hero {
				position: relative;
				display: block;
				min-height: 240px;
				height: clamp(240px, 34vw, 360px);
				max-height: 42vh;
				padding: 0;
				overflow: hidden;
				isolation: isolate;
				background: #1f2937;
			}

			.modal__content__header.charity-details-modal__hero::after {
				content: '';
				position: absolute;
				inset: 0;
				z-index: 1;
				background: linear-gradient(180deg, rgba(12, 16, 24, 0.10) 0%, rgba(12, 16, 24, 0.08) 34%, rgba(12, 16, 24, 0.32) 62%, rgba(12, 16, 24, 0.78) 100%);
				pointer-events: none;
			}

			.charity-details-modal__hero-image,
			.charity-details-modal__hero-video,
			.charity-details-modal__hero-video iframe {
				position: absolute;
				inset: 0;
				display: block;
				width: 100%;
				height: 100%;
			}

			.charity-details-modal__hero-image {
				z-index: 0;
				object-fit: cover;
				object-position: center;
			}

			.charity-details-modal__hero-video {
				z-index: 0;
			}

			.charity-details-modal__hero-video iframe {
				border: 0;
			}

			.charity-details-modal__hero-caption {
				position: absolute;
				inset: auto 16px 16px 16px;
				z-index: 2;
				padding: 0;
				pointer-events: none;
			}

			.charity-details-modal__hero-title {
				display: inline-block;
				margin: 0;
				max-width: min(22ch, calc(100% - 56px));
				padding: 12px 16px;
				border-radius: 18px;
				text-align: left;
				line-height: 1.08;
				letter-spacing: -0.02em;
				text-wrap: balance;
				background: rgba(20, 24, 31, 0.30);
				border: 1px solid rgba(255, 255, 255, 0.18);
				box-shadow:
					0 10px 30px rgba(0, 0, 0, 0.22),
					inset 0 1px 0 rgba(255, 255, 255, 0.14);
				backdrop-filter: blur(4px) saturate(150%);
				-webkit-backdrop-filter: blur(4px) saturate(150%);
				color: var(--color-white);
				text-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
			}

			.charity-details-modal__hero-title::before {
				content: '';
				display: block;
				width: 40px;
				height: 3px;
				margin-bottom: 10px;
				border-radius: 999px;
				background: var(--color-raspberry);
				box-shadow: 0 0 18px rgba(254, 35, 74, 0.35);
			}

			.modal__content__header.charity-details-modal__hero .modal__content__header__close {
				position: absolute;
				top: 16px;
				right: 16px;
				z-index: 3;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 44px;
				height: 44px;
				background: rgba(12, 16, 24, 0.42);
				backdrop-filter: blur(6px);
				border-radius: 999px;
			}

			.modal__content__header.charity-details-modal__hero .modal__content__header__close-button {
				position: relative;
				width: 24px;
				height: 24px;
				transform: none;
			}

			.modal__content__header.charity-details-modal__hero .modal__content__header__close-button:before,
			.modal__content__header.charity-details-modal__hero .modal__content__header__close-button:after {
				--close-color: var(--color-white);
			}

			.charity-details-modal__body,
			.modal__content__body {
				display: flex;
				align-items: flex-start;
				flex-direction: column;
				gap: 1rem;
				padding: 24px;
				padding-bottom: 32px;
			}

			.charity-details-modal__body > *:first-child,
			.modal__content__body > *:first-child {
				margin-top: 0;
			}

			p,
			li {
				font-family: Inter;
				font-size: 14px;
				font-weight: 400;
				line-height: 22px;
				text-rendering: initial;
				letter-spacing: initial;
				text-align: left;
			}

			.modal__content__body__goals,
			.modal__content__body__description {
				ul {
					margin: 0;
					padding-left: 2em;

					li {
						list-style-type: none;
						position: relative;

						&:before {
							font-family: 'Tribee Icons';
							font-weight: normal;
							content: '\071F';
							font-size: 0.5em;
							color: var(--color-mandarin);
							position: absolute;
							left: -2em;
						}
					}
				}
			}

			.modal__content__body__description {
				> :first-child {
					margin-top: 0;
				}

				h2,
				h3 {
					color: var(--color-raspberry);
					margin: 20px 0 0.5em;
				}

				h2:first-child,
				h3:first-child {
					margin-top: 0;
				}
			}

			.subtitle {
				color: var(--color-raspberry);
				font-size: 20px;
				line-height: 24px;
				font-weight: 700;
			}
		}
	@media screen and (min-width: 720px) {
		padding-top: 40px;
		.title {
			max-width: 580px;
		}
		.btn-m {
			max-width: 250px;
			margin: 0 auto;
		}
		.carousel-controls {
			margin-top: -60px;
		}
		.charity-details-modal {
			.charity-details-modal__hero-caption {
				inset: auto 24px 24px 24px;
			}
		}
	}
	@media screen and (min-width: 1000px) {
		.title {
			max-width: 620px;
		}
	}
}