.accordions {
margin: var(--space-3xl) 0;
}
.accordion-item {
background: var(--color-sable);
transition: all 0.3s ease;
margin-bottom: var(--space-sm);
border-radius: var(--border-radius);
}
.accordion-item .accordion-header h1,
.accordion-item .accordion-header h2,
.accordion-item .accordion-header h3,
.accordion-item .accordion-header h4,
.accordion-item .accordion-header h5,
.accordion-item .accordion-header h6 {
font-size: var(--font-size-lg);
margin: 0px;
padding: 0px;
}
.accordion-item .accordion-header {
padding: 24px 48px 24px 24px;
display: block;
position: relative;
transition: 0.3s;
cursor: pointer; width: 100%;
text-align: left;
background: none;
border: none;
font: inherit;
color: inherit;
}
.accordion-item .accordion-header:after {
content: "";
position: absolute;
top: 50%;
right: 35px;
width: 22px;
height: 2px;
background: var(--color-text);
transform: translateY(-50%);
transition: 0.3s;
}
.accordion-item .accordion-header:before {
content: "";
position: absolute;
top: 50%;
right: 45px;
width: 2px;
height: 22px;
background: var(--color-text);
transform: translateY(-50%);
transition: 0.3s;
}
.accordion-item .accordion-header.active:before {
transform: translateY(-50%);
height: 0px;
}
.accordion-item.active {
background: #e5e5e5;
}
.accordion-item .accordion-header:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: -2px;
border-radius: var(--border-radius);
}
.accordion-item .accordion-content {
padding: var(--space-sm) 24px var(--space-xl) 24px;
display: none;
}
.accordion-item .accordion-content p:last-child {
margin-bottom: 0px !important;
}
.accordion-content ul {
margin-bottom: 20px;
margin-top: 20px;
margin-left: 14px;
list-style: none;
padding: 0;
}
.accordion-content ul ul {
margin-bottom: 16px;
margin-top: 12px;
}
.accordion-content ul > li {
position: relative;
padding-left: 24px;
margin-bottom: 16px;
}
.accordion-content ul > li:before {
content: "";
position: absolute;
left: 0;
top: 10px;
width: 5px;
height: 5px;
background: currentColor;
border-radius: 100%;
}
.accordion-content ul ul > li:before {
background: transparent;
border: 1px solid currentColor;
}  @media screen and (max-width: 768px) {
.accordions {
margin: var(--space-2xl) 0;
}
.accordion-item .accordion-header {
padding: 20px 40px 20px 20px;
}
.accordion-item .accordion-header:after {
right: 28px;
width: 18px;
}
.accordion-item .accordion-header:before {
right: 36px;
height: 18px;
}
.accordion-item .accordion-content {
padding: var(--space-sm) 20px var(--space-lg) 20px;
}
} @media screen and (max-width: 480px) {
.accordions {
margin: var(--space-xl) 0;
}
.accordion-item .accordion-header {
padding: 16px 36px 16px 16px;
}
.accordion-item .accordion-header:after {
right: 22px;
width: 16px;
}
.accordion-item .accordion-header:before {
right: 29px;
height: 16px;
}
.accordion-item .accordion-content {
padding: var(--space-sm) 16px var(--space-lg) 16px;
}
}