/* =========================== */
/* === COLLAPSIBLE DRAWERS === */

.collapsible-drawers__drawers {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.collapsible-drawers__drawer {
    box-shadow: 1px 2px 0.625rem rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    transition: box-shadow 300ms;
}
.collapsible-drawers__drawer:not(.-no-dropout):hover,
.collapsible-drawers__drawer:not(.-no-dropout):focus-within {
    box-shadow: 0 5px 0.625rem rgba(0,0,0,0.2);
}
.collapsible-drawers__header {
    display: flex;
    gap: 0.5em;
    width: auto;
    background-color: transparent;
    border: none;
    outline: none;
    text-align: start;
    padding: 0.75rem;
}
.collapsible-drawers__drawer.-no-dropout .collapsible-drawers__header span {
    user-select: text;
    cursor: text;
}
.collapsible-drawers__drawer:not(.-no-dropout) .collapsible-drawers__header {
    cursor: pointer;
}
.collapsible-drawers__icon {
    display: inline-block;
    align-self: center;
    flex-shrink: 0;

    background-color: #444;
    color: #fff;

    width: 1em;
    height: 1em;
    line-height: 0.75em;

    border-radius: 3px;

    text-align: center;

    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 3px;
    padding-right: 3px;

    transition: background-color 300ms;
}
.collapsible-drawers__icon::before {
    content: "+";
}
.collapsible-drawers__header[aria-expanded="true"] .collapsible-drawers__icon::before {
    content: "-";
}
.collapsible-drawers__header:hover .collapsible-drawers__icon,
.collapsible-drawers__header:focus-visible .collapsible-drawers__icon{
    background-color: #000;
}
.collapsible-drawers__header:focus-visible {
    outline: 1px solid currentColor;
}
.collapsible-drawers__body {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 0.75rem;
    padding-bottom: 1.5rem;
    padding-inline: 2.5rem;
    animation: drawer-out 150ms ease-out 0s;
}
.collapsible-drawers__body[hidden] {
    display: none;
}
@media screen and (min-width: 768px) {
    .collapsible-drawers__body {
        flex-direction: row;
    }
}

.collapsible-drawers__image {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: top left;
}
@media screen and (min-width: 768px) {
    .collapsible-drawers__image {
        width: 35%;
    }
}
.collapsible-drawers__buttons {
    margin-top: 1.5rem;
}

@keyframes drawer-out {
    0% {
        transform: translateY(-10px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}