.accordion {
    --color: var(--mapa-light);
}
.accordion.--white {
    --color: var(--white);
}

.accordion {
    height: var(--height-closed);
    overflow: hidden;
    transition: height 0.3s ease-out;
}
.accordion[aria-expanded=true] {
    height: calc(var(--height-closed) + var(--height-open));
}
.accordion__header {
    align-items: center;
    background: var(--color);
    border: 1px solid var(--color);
    border-radius: var(--border-radius-big);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    padding: var(--padding-xs) var(--padding-s);
}
.accordion__header::-webkit-details-marker {
    display: none;
}
.accordion__header::focus {
    outline: none;
}
.accordion__header svg {
    height: 0.625rem;
    min-width: 1.25rem;
    position: relative;
    transition: transform 0.2s ease-out;
}
[open] .accordion__header svg {
    transform: rotate(180deg);
}
.accordion__content {
    padding: var(--padding-s) var(--padding-m) 0 var(--padding-s);
}
.accordion__content > *:not(:last-child) {
    margin-bottom: var(--padding-s);
}

@media (max-width: 480px) {
    .accordion__content {
        font-size: var(--font-size-base-s);
    }
}
@media (min-width: 480px) {
    .accordion__header {
        padding: var(--padding-xs) var(--padding-m);
    }
    .accordion__content {
        padding: var(--padding-m) var(--padding-lg) 0 var(--padding-m);
    }
    .accordion__content > *:not(:last-child) {
        margin-bottom: var(--padding-m);
    }
}