.accordion-wrapper {
    position: relative;
}

.accordion-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

.accordion-toggle:checked~.accordion-content {
    max-height: fit-content;
    opacity: 1;
}

.accordion-icon {
    position: relative;
    width: 24px;
    height: 24px;
}

.icon-down,
.icon-up {
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* Default states */
.icon-down {
    opacity: 1;
    transform: rotate(0deg);
}

.icon-up {
    opacity: 0;
    transform: rotate(-180deg);
}

/* Checked states */
.accordion-toggle:checked~label .icon-down {
    opacity: 0;
    transform: rotate(180deg);
}

.accordion-toggle:checked~label .icon-up {
    opacity: 1;
    transform: rotate(0deg);
}