.drawers__ctn{
	width: 100%;
    max-width: var(--width-site);
    margin-left: auto;
    margin-right: auto;
    padding-right: var(--gutter);
    padding-left: var(--gutter);
}

.drawers__title{
	margin-bottom: 1.5rem;
}

.drawer__detail{
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: solid 1px;
	box-sizing: content-box;
}

.drawer__summary{
	font-family: var(--font-alt);
	display: flex;
	padding-right: 3rem;
    align-items: center;
    cursor: pointer;
    position: relative;
}

.drawer__summary__title{
	margin-bottom: 0;
	margin-top: 0;
}

.drawer__summary:focus{
	outline: 0;
}

.drawer__summary::-webkit-details-marker {
  display: none;
}

.drawer__summary__icon { 
	position: absolute;
	right: 0;
	transition: transform 0.2s;
}

.drawer__detail[open] .drawer__summary__icon {
	transform: rotate(180deg);
}

.drawer__content{
	margin-top: 1rem;
	margin-bottom: 1rem;
	animation-name: fadeinfromtop;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

.drawer__content *{
	max-width: 90%;
}

@keyframes fadeinfromtop {
	from {opacity: 0; transform: translateY(-30px);}
	to {opacity: 1;}
}
