.oak-accordion {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--oak-spacing-xs);
    padding: var(--oak-spacing-2xl);
    background-color: var(--oak-white);
    margin: 0 var(--oak-spacing-2xl);
    border-radius: var(--oak-radius-l);
    padding: var(--oak-spacing-2xl) var(--oak-spacing-3xl);
}

.oak-row[style^="background-image:"] .oak-accordion {
    background: none;
}

.oak-row-2-col-50-50 .oak-accordion {
    max-width: 50%;
    margin: 0;
    padding: var(--oak-spacing-2xl);
    border-radius: 0;
}

.oak-accordion .oak-text {
    max-width: 100%;
    padding: 0;
    margin: 0;
    margin-bottom: var(--oak-spacing-xl);
    background-color: var(--oak-white);
    color: var(--oak-black);
    order: 0;
}

.oak-accordion .oak-text .oak-btn,
.oak-accordion .oak-text .oak-download-btn {
    background-color: var(--oak-black) !important;
    color: var(--oak-white) !important;
    border-color: var(--oak-black) !important;
}

.oak-accordion .oak-text .oak-btn:hover,
.oak-accordion .oak-text .oak-download-btn:hover {
    background-color: var(--oak-white) !important;
    color: var(--oak-black) !important;
    border-color: var(--oak-black) !important;
}

.oak-accordion .oak-text .oak-btn::after {
    background-image: var(--oak-btn-icon-white) !important;
}

.oak-accordion .oak-text .oak-btn:hover::after {
    background-image: var(--oak-btn-icon-black) !important;
}

.oak-accordion .oak-text .oak-download-btn::after {
    background-image: var(--oak-download-icon-white) !important;
}

.oak-accordion .oak-text .oak-download-btn:hover::after {
    background-image: var(--oak-download-icon-black) !important;
}

.oak-accordion-option {
    background-color: var(--oak-green-500);
    color: var(--oak-black);
    border-radius: var(--oak-radius-l);
    transition: all var(--oak-duration-m) var(--oak-ease);
}

.oak-accordion-option.oak-expanded {
    background-color: var(--oak-green-200);
}

.oak-accordion-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    width: 100%;
    min-height: 128px;
    padding: var(--oak-spacing-m);
    gap: var(--oak-spacing-m);
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
}

.oak-accordion-btn .oak-icon-chevron-l {
    transition: all var(--oak-duration-m) var(--oak-ease);
}

.oak-accordion-option.oak-expanded .oak-icon-chevron-l {
    transform: rotate(180deg);
}

.oak-accordion-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: all var(--oak-duration-m) var(--oak-ease);
    padding: 0 var(--oak-spacing-m);
}

.oak-accordion-option.oak-expanded .oak-accordion-wrapper {
    grid-template-rows: 1fr;
    padding-bottom: var(--oak-spacing-m);
}

.oak-accordion-option-generated p:empty {
    display:none;
}

.oak-accordion-content {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--oak-spacing-m);
}

@media (max-width: 1920px) {
    .oak-accordion {
        margin: 0 var(--oak-spacing-xl);
    }
}

@media (max-width: 1440px) {
    .oak-accordion {
        margin: 0 var(--oak-spacing-m);
    }

    .oak-row-2-col-50-50 .oak-accordion {
        padding: var(--oak-spacing-xl);
    }
}

@media (max-width: 1024px) {
    .oak-accordion,
    .oak-row-2-col-50-50 .oak-accordion {
        margin: 0;
        order: 1;
        max-width: 100%;
        padding: var(--oak-spacing-xl);
    }
}

@media (max-width: 768px) {
    .oak-accordion,
    .oak-row-2-col-50-50 .oak-accordion {
        padding: var(--oak-spacing-m);
    }

    .oak-accordion-btn {
        min-height: 100px;
    }
}

@media (max-width: 512px) {
    .oak-accordion,
    .oak-row-2-col-50-50 .oak-accordion {
        padding: var(--oak-spacing-s);
    }

    .oak-accordion-btn {
        padding: var(--oak-spacing-s);
        gap: var(--oak-spacing-s);
    }

    .oak-accordion-wrapper {
        padding: 0 var(--oak-spacing-s);
    }

    .oak-accordion-option.oak-expanded .oak-accordion-wrapper {
        padding-bottom: var(--oak-spacing-s);
    }
}