details {
	position: relative;
	max-inline-size: 100%;
	padding: 1rem;
	/* margin-block: 1rem 0; */
	/* margin-inline: auto; */
	border-bottom: 1px solid #d9d9d9;
}

.details[open]::details-content {
	/* Fallback for browsers that don't support calc-size() function */
	block-size: auto;

	/* calc-size() function allows transition to height: auto; */
	block-size: calc-size(auto, size);
}

summary {
	padding-inline: 2rem;
	position: relative;
	font-weight: 700;
	cursor: pointer;
}
    
details summary::-webkit-details-marker {
	display: none;
}

.details::details-content {
	display: block;
	margin-inline: 2rem;
	block-size: 0;
	overflow: hidden;
	transition-property: block-size, content-visibility;
	transition-duration: 0.5s;
	transition-behavior: allow-discrete;
}

/* List Item ::marker supports only some CSS properties, so we're using ::before pseudo-element instead */
summary::marker {
	content: "\276F";
	content: none;
}

summary::before {
	content: "\276F";
	position: absolute;
	inset-inline-start: 98%;
	inset-block-start: -0.05rem;
	rotate: 90deg;
	transition: rotate 0.2s;
}

.details[open] summary::before {
	rotate: 270deg;
	inset-block-start: 0.05rem;
}
    
.details__content{
	font-size: 1.25em;
	margin: 0;
	color: #333;
	line-height: 1.5;
	font-family: "Hoefler Titling A", "Hoefler Titling B";
	font-style: normal;
	font-weight: 300;
	letter-spacing: 0.02em;
}
    
.details__summary {
	font-size: 2.25rem !important;
	line-height: 1.125;
	margin-bottom: 0.4em;
	color: #4A4A4A;
	font-family: "LL Brown Pro Bold Web" !important;
	font-style: normal;
	font-weight: 700;
	margin-top: 10px;
}