#calendars {background-color: #05213d; background-image: url('../img/calendar_bg.svg'); color: white; margin: 0; padding: 4rem 0}
#calendars .container > :first-child {margin-top: 0}
#calendars .container > :last-child {margin-bottom: 0}
#calendars .center {text-align: center; text-wrap: balance}
#calendars .center img {display: block; margin: 1rem auto}
#calendars h2 {color: inherit}
#calendars h2 span {display: block}
#calendars .bg-hr {align-items: center; display: flex; gap: 1rem}
#calendars .bg-hr hr, .bg-hr p {margin: 0}
#calendars .bg-hr hr {border-color: white; flex-grow: 1}
#calendars .button {background-color: transparent; border: 1px solid; border-radius: 0.5rem; color: inherit; display: inline-block; padding: 0.5rem 1rem; text-decoration: none}
#calendars .buttonholder {display: flex; flex-wrap: wrap; gap: 1rem}
#calendars .center .buttonholder {justify-content: center}
#faq {background-color: #05213d; background-image: url('../img/faq_bg.svg'); color: white; margin: 0; padding: 4rem 0}
#faq h2, #faq h3 {color: white}
#faq a {color: inherit}
.faqs {border-bottom: 1px solid white}
.faqs dt, .faqs dd {border: 1px solid white; border-bottom: 0}
.faqs dt {background-color: #956c41}
.faqs dd {background-color: white; border-top: 0; margin: 0; color: black; padding: 1rem}
.faqs h3 {font-size: 1.125rem; text-transform: none}
.faqs h4 {margin: 1rem 0}
.faqs dt > h3 {padding: 1rem}
.faqs dt >:first-child, .faqs dd >:first-child {margin-top: 0}
.faqs dt > :last-child, .faqs dd > :last-child {margin-bottom: 0}
.faqs.init dt h3 {cursor: pointer; padding-right: 3rem; position: relative; user-select: none}
.faqs.init dt h3::after {align-items: center; background-color: white; border-radius: 100%; color: #956c41; content: '\25bc'; display: flex; flex-direction: column; font-size: 0.85rem; height: 1.25rem; justify-content: center; position: absolute; right: 1rem; top: 1rem; width: 1.25rem}
.faqs.init dt h3[aria-expanded="true"]::after {content: '\25b2'}
@media(min-width: 60rem){
	#calendars h2 span {display: inline}
	#faq .container {display: flex; gap: 4rem}
	#faq .copy, .faqs {margin: 0}
	.faqs {flex-basis: 60%; flex-shrink: 0}
}