.accordion-list {
    display: flex;
    flex-direction: column;
    max-width: 100%;
}

.accordion-header {
    all:unset;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    padding: var(--padding-close);

    width: 100%;

    border-top: 1px solid var(--clr-darkbg-line);
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    border-bottom: 1px solid transparent;

    cursor: pointer;    
}

.accordion-header.header-open .accordion-content {
    border-bottom: 1px solid var(--clr-darkbg-line);
}

.accordion-content {
    display: grid;
    grid-template-columns: 3fr 2fr;
    column-gap: var(--padding-normal);

    padding-inline: var(--padding-big) var(--padding-close);

    opacity: 0;
    visibility: hidden;

    overflow: hidden;

    max-height: 0;
    transition: opacity 250ms ease-in-out, max-height 250ms ease-in-out;

    will-change: opacity, max-height;
}

.accordion-content .copy {
    margin-top: 0;
}

.accordion-content.open {
    max-height: 550px;
    /* Adjust this as needed based on content size */
    opacity: 1;
    visibility: visible;
}

.accordion-item:last-child > .accordion-content {
    /* background-color: var(--clr-card-bg); */
    border-bottom: 1px solid var(--clr-darkbg-line);
}   

.accordion-item:last-child:not(.selected) > .accordion-header:not(:focus) {
    border-bottom: 1px solid var(--clr-darkbg-line);
    
}

.accordion-header:hover:not(.header-open),
.accordion-header:focus:not(.header-open),
.accordion-header:focus-within:not(.header-open) {
   background: var(--clr-secondary-gradient);
   border-radius: var(--padding-tight);
}

.accordion-header:focus:not(.header-open) {
    border: 1px solid var(--clr-black);
    border-radius: var(--padding-tight);
}

.accordion-header:active:not(.header-open) {
    border: 1px solid var(--clr-cta);
    border-radius: var(--padding-tight);

}


@media (max-width: 1127px) { 
    .accordion-content.open {
        max-height: fit-content;
    }
}


@media (max-width: 480px) {

    .accordion-content {
        display: block;
        padding-inline: var(--padding-close) var(--padding-close);
        
    }

    .accordion-content.open {
        max-height: fit-content;
        padding-bottom: var(--padding-normal);
    }

    .left-object {
        display: block;
    }
}



/* Morph close button to open/close states */
.icon-close .close-line {
    transition: transform 250ms ease-in-out, 
    opacity 250ms ease-in-out;
    transform-origin: 50% 50%;
}

/* Default "plus" state */
.icon-close .cross {
    transform: rotate(0deg);
}
.icon-close .across {
    transform: rotate(90deg);
}

/* Active "close" state */
.icon-close.morphRotate .cross {
    transform: rotate(-45deg);
    opacity: 0;
  
}
.icon-close.morphRotate .across {
    transform: rotate(0deg);
}

.icon-close.morphRotate > rect {
    fill: var(--clr-lightbg-line);
}