.accordion-section {
    background: linear-gradient(180deg, #B4D2D2 0%, #FFFFFF 100%);
    padding-block: 5rem;

    @media(min-width: $tabletP1) {
        padding-block: 10rem;
    }

    // .accordion-section__container

    &__container {
    }

    // .accordion-section__content

    &__content {
        display: flex;
        flex-direction: column;
        gap: 2.2rem;

        @media(min-width: $tabletSmallP1) {
            gap: 2rem;
        }
    }

    // .accordion-section__head

    &__head {
        h2 {
            @extend .h3;
            @include adaptiveProperty("font-size", 34, 24);
            letter-spacing: 0;
            line-height: 1.1;

            @media(min-width: $tabletSmallP1) {
                letter-spacing: -.7px;
                line-height: 1.2;
            }
        }
    }

    // .accordion-section__footer

    &__footer {
        text-align: center;
        margin-top: 2rem;
        @media(min-width: $tabletSmallP1) {
            text-align: left;
            margin-top: 0;
        }

        h3 {
            line-height: 1.3;
            letter-spacing: -.3px;
            @include adaptiveProperty("font-size", 24, 20);
        }

        p {
            &:not(:first-child) {
                margin-top: 1rem;
            }
        }
    }

    // .accordion-section__btn

    &__btn {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 1rem;
        @include adaptiveProperty("font-size", 20, 16);
        line-height: 1.5;
        padding-block: 1rem;
        margin-top: 1.5rem;
        

        &::after {
            content: '';
            width: 2.4rem;
            height: 2.4rem;
            background-image: url("data:image/svg+xml,%0A%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 0.75C21.3178 0.75 27.25 6.68223 27.25 14C27.25 21.3178 21.3178 27.25 14 27.25C6.68223 27.25 0.75 21.3178 0.75 14C0.75 6.68223 6.68223 0.75 14 0.75Z' stroke='%2339462F' stroke-width='1.5'/%3E%3Cpath d='M17.729 12.857L13.6751 8.80328C13.5498 8.67777 13.4865 8.5304 13.4852 8.36118C13.4837 8.19195 13.5455 8.04409 13.6707 7.9176C13.7959 7.79074 13.9437 7.72804 14.114 7.72952C14.2844 7.73099 14.4327 7.7943 14.5589 7.91944L19.68 13.0405C19.747 13.1083 19.7958 13.1788 19.8262 13.252C19.8568 13.3253 19.8721 13.403 19.8721 13.4852C19.8721 13.5673 19.8568 13.6449 19.8262 13.7178C19.7958 13.7909 19.747 13.8612 19.68 13.9288L14.5545 19.0542C14.4249 19.1794 14.2765 19.2419 14.1093 19.2419C13.9421 19.2419 13.7959 19.1794 13.6707 19.0542C13.5455 18.926 13.4829 18.7781 13.4829 18.6105C13.4829 18.4427 13.5455 18.296 13.6707 18.1704L17.729 14.1122L8.7375 14.1122C8.55758 14.1122 8.40727 14.0527 8.28655 13.9335C8.16583 13.8144 8.10547 13.6648 8.10547 13.4846C8.10547 13.3045 8.16583 13.1548 8.28655 13.0357C8.40727 12.9166 8.55758 12.857 8.7375 12.857L17.729 12.857Z' fill='%2339462F'/%3E%3C/svg%3E%0A");
            background-position: center;
            background-repeat: no-repeat;
            background-size: 100%;
            transition: .2s all;

            @media(min-width: $tabletSmallP1) {
                width: 2.8rem;
                height: 2.8rem;
            }
        }

        span {
            position: relative;
            line-height: 1;
            &::before {
                content: '';
                width: 100%;
                height: 1px;
                position: absolute;
                bottom: 0;
                left: 0;
                background-color: $primary;
                transition: .2s all;
            }
        }

        &:hover {
            &::after {
                transform: translateX(.4rem);
                background-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 0.75C21.3178 0.75 27.25 6.68223 27.25 14C27.25 21.3178 21.3178 27.25 14 27.25C6.68223 27.25 0.75 21.3178 0.75 14C0.75 6.68223 6.68223 0.75 14 0.75Z' fill='%23E5A424' stroke='%2339462F' stroke-width='1.5'/%3E%3Cpath d='M17.7288 12.857L13.6749 8.80328C13.5496 8.67777 13.4863 8.5304 13.485 8.36118C13.4835 8.19195 13.5453 8.04409 13.6705 7.9176C13.7957 7.79074 13.9435 7.72804 14.1139 7.72952C14.2842 7.73099 14.4325 7.7943 14.5587 7.91944L19.6798 13.0405C19.7468 13.1083 19.7956 13.1788 19.826 13.252C19.8566 13.3253 19.8719 13.403 19.8719 13.4852C19.8719 13.5673 19.8566 13.6449 19.826 13.7178C19.7956 13.7909 19.7468 13.8612 19.6798 13.9288L14.5543 19.0542C14.4247 19.1794 14.2763 19.2419 14.1091 19.2419C13.9419 19.2419 13.7957 19.1794 13.6705 19.0542C13.5453 18.926 13.4828 18.7781 13.4828 18.6105C13.4828 18.4427 13.5453 18.296 13.6705 18.1704L17.7288 14.1122L8.73731 14.1122C8.5574 14.1122 8.40708 14.0527 8.28636 13.9335C8.16564 13.8144 8.10529 13.6648 8.10529 13.4846C8.10529 13.3045 8.16564 13.1548 8.28636 13.0357C8.40708 12.9166 8.5574 12.857 8.73731 12.857L17.7288 12.857Z' fill='%2339462F'/%3E%3C/svg%3E%0A");
            }
            span {
                &::before {
                    background-color: $secondary;
                }
            }

        }
    }

    // .accordion-section--light-bg

    &--light-bg {
        background: linear-gradient(180deg, #D6D1BD 0%, #FFFFFF 100%);

    }
}



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

    // .accordion__item

    &__item {
        border-bottom: 1px solid $primary;

        &:first-child {
            border-top: 1px solid $primary;
        }

        &.active {
            .accordion__wrapper {
                grid-template-rows: 1fr;
                opacity: 1;
                overflow: visible;
            }

            .accordion__icon {
                transform: rotate(180deg);
            }

            .accordion__wrapper {
                padding-bottom: 2rem;
                padding-top: .3rem;
                @media(min-width: $tabletSmallP1) {
                    padding-top: 0;
                }
            }
        }
    }

    // .accordion__trigger

    &__trigger {
        padding: 2rem 2rem 2rem 4.8rem;
        position: relative;
        width: 100%;
        display: flex;
        transition: .2s all;
        @media(min-width: $tabletSmallP1) {
            padding: 2rem 2rem 2rem 5.3rem;
        }
    }

    // .accordion__title

    &__title {
        @include adaptiveProperty("font-size", 24, 20);
        line-height: 1.4;
        font-family: $secondary-font;
        letter-spacing: -.3px;
        @media(min-width: $tabletSmallP1) {}
    }

    // .accordion__icon

    &__icon {
        width: 2.4rem;
        height: 2.4rem;
        background-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M27.5 14C27.5 21.4558 21.4558 27.5 14 27.5C6.54415 27.5 0.499999 21.4558 0.499999 14C0.5 6.54416 6.54416 0.5 14 0.500001C21.4558 0.500001 27.5 6.54416 27.5 14Z' stroke='%2339462F'/%3E%3Cpath d='M15.143 17.729L19.1967 13.6751C19.3222 13.5498 19.4696 13.4865 19.6388 13.4852C19.8081 13.4837 19.9559 13.5455 20.0824 13.6707C20.2093 13.7959 20.272 13.9437 20.2705 14.114C20.269 14.2844 20.2057 14.4327 20.0806 14.5589L14.9595 19.68C14.8917 19.747 14.8212 19.7958 14.748 19.8262C14.6747 19.8568 14.597 19.8721 14.5148 19.8721C14.4327 19.8721 14.3551 19.8568 14.2822 19.8262C14.2091 19.7958 14.1388 19.747 14.0712 19.68L8.94577 14.5545C8.82063 14.4249 8.75806 14.2765 8.75806 14.1093C8.75806 13.9421 8.82063 13.7959 8.94577 13.6707C9.07398 13.5455 9.2219 13.4829 9.38953 13.4829C9.55729 13.4829 9.70398 13.5455 9.82961 13.6707L13.8878 17.729L13.8878 8.7375C13.8878 8.55758 13.9473 8.40727 14.0665 8.28655C14.1856 8.16583 14.3352 8.10547 14.5154 8.10547C14.6955 8.10547 14.8452 8.16583 14.9643 8.28655C15.0834 8.40727 15.143 8.55758 15.143 8.7375L15.143 17.729Z' fill='%2339462F'/%3E%3C/svg%3E%0A");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100%;
        position: absolute;
        top: 2.1rem;
        left: 0rem;
        transition: .2s all;

        @media(min-width: $tabletSmallP1) {
            width: 2.8rem;
            height: 2.8rem;
            top: 2rem;
        }
    }

    // .accordion__wrapper

    &__wrapper {
        display: grid;
        grid-template-rows: 0fr;
        opacity: 0;
        overflow: hidden;
        transition: .2s all;
        padding-left: 5rem;
    }

    // .accordion__text

    &__text {
        min-height: 0;
    }
}