.accordion {
    display: flex;
    flex-direction: column;
}

/* Hide default icon */
.accordion summary::-webkit-details-marker {
    display: none;
}

/* Hide default icon */
.accordion summary::marker {
    content: '';
}

.accordion .item {
    background: var(--white);
    border-top: 1px solid var(--black-alpha-1);
    overflow: hidden;
}

.accordion .item:last-child {
    border-bottom: 1px solid var(--black-alpha-1);
}

.accordion summary .title-icon {
    width: 2.2rem;
    height: 2.2rem;
    background: var(--light);
    border-radius: 1000px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.accordion summary .title-icon svg,
.accordion summary .title-icon img {
    width: 70%;
}

.accordion summary .title-icon svg path {
    width: 100%;
    fill: var(--color-2) !important;
}

.accordion .heading {
    position: relative;
    padding: 1.5rem 2rem 1.5rem 0rem;
    transition-duration: 0.3s;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    column-gap: .8rem;
}

.accordion.faq-accordion .heading {
    align-items: center;
}

.accordion .heading .title {
    margin-top: 0;
    margin-bottom: 0;
}

.accordion .heading:hover {
    background: var(--white);
}

.accordion .open > .heading {
    background: var(--white);
}

.accordion .heading:focus-visible:after {
    /* Accessibility */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: color-mix(in oklab, var(--color-1) 25%, transparent);
}

.accordion .icon {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    transform-origin: center;
    width: 1.5rem;
    height: 1.5rem;
    transition-duration: var(--transition-duration);
}

.accordion .icon:before,
.accordion .icon:after {
    content: "";
    display: block;
    position: absolute;
    background: var(--text-color);
}

.accordion .heading:hover .icon:before,
.accordion .heading:hover .icon:after,
.accordion .open > .heading .icon:before,
.accordion .open > .heading .icon:after {
    background: var(--black);
}

.accordion .content {
    overflow: hidden;
    height: 0;
    transition: height var(--transition-duration) ease;
}

.accordion .inner-content {
    padding-left: 3rem;
    padding-right: var(--spacing-default);
    padding-bottom: var(--spacing-default);
}

/* Plus to cross */
.accordion .icon:before {
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 100%;
    height: 2px;
}

.accordion .icon:after {
    top: 0;
    right: 50%;
    transform: translateX(50%);
    width: 2px;
    height: 100%;
}

.accordion .open > .heading > .icon {
    transform: translateY(-50%) rotate(-135deg);
}

/* Plus to minus 
.accordion .icon:before {
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	width: 100%;
	height: 2px;
}

.accordion .icon:after {
	top: 0;
	right: 50%;
	transform: translateX(50%);
	width: 2px;
	height: 100%;
}

.accordion .open > .heading > .icon:after {
	display: none;
} */
/* Chevron rotate
.accordion .item > .heading > .icon {
	top: calc(50% - 0.15rem);
	width: 0.5rem;
	height: 0.5rem;
	border-left: 2px solid var(--text-color);
	border-bottom: 2px solid var(--text-color);
	transform: translateY(-50%) rotate(-45deg);
}

.accordion .item > .heading:hover > .icon {
	border-left: 2px solid var(--white);
	border-bottom: 2px solid var(--white);
}

.accordion .open > .heading > .icon {
	top: 50%;
	border-left: 2px solid var(--white);
	border-bottom: 2px solid var(--white);
	transform: translateY(-50%) rotate(135deg);
} */