.faq {
    overflow: hidden;
    padding-block: 120rem;
}

@media (max-width: 767px) {
    .faq {
        padding-block: 40rem;
    }
}

.faq__container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    gap: 48rem;
    width: 100%;
}

.faq__inner {
    width: 100%;
    max-width: 820rem;
    margin-inline: auto;
}

.faq__images--right {
    display: none;
}

.faq__images--left {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
}

.faq__title {
    -webkit-padding-before: 16rem;
            padding-block-start: 16rem;
    font-size: 48rem;
    font-weight: 500;
    line-height: 1.1;
}

.faq__title-text {
    color: var(--color-gray-700);
}

.faq__title-container {
    text-align: center;
}

.faq__items--margin {
    -webkit-margin-before: 72rem;
            margin-block-start: 72rem;
}

.faq__item {
    padding-block: 16rem;
}

.faq__item:first-child {
    -webkit-padding-before: 0;
            padding-block-start: 0;
}

.faq__item:not(:last-child) {
    border-bottom: 1rem solid rgba(0, 0, 0, 0.2);
}

.faq__accordion {
    width: 100%;
}

.faq__accordion-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    position: relative;
    border-radius: 4rem;
    cursor: pointer;
    padding-block: 16rem;
    -webkit-transition:
        background-color var(--global-transition-duration),
        -webkit-transform var(--global-transition-duration);
    transition:
        background-color var(--global-transition-duration),
        -webkit-transform var(--global-transition-duration);
    transition:
        background-color var(--global-transition-duration),
        transform var(--global-transition-duration);
    transition:
        background-color var(--global-transition-duration),
        transform var(--global-transition-duration),
        -webkit-transform var(--global-transition-duration);
}

.faq__accordion-title {
    font-weight: 500;
    font-size: 18rem;
    line-height: 21rem;
    -webkit-transition: color var(--global-transition-duration);
    transition: color var(--global-transition-duration);
}

.faq__accordion-icon {
    width: 17rem;
    min-width: 17rem;
    height: 10rem;
    -webkit-transform-origin: center;
        -ms-transform-origin: center;
            transform-origin: center;
    fill: none;
    stroke: var(--color-black);
    -webkit-transition:
        stroke var(--global-transition-duration),
        -webkit-transform var(--global-transition-duration);
    transition:
        stroke var(--global-transition-duration),
        -webkit-transform var(--global-transition-duration);
    transition:
        transform var(--global-transition-duration),
        stroke var(--global-transition-duration);
    transition:
        transform var(--global-transition-duration),
        stroke var(--global-transition-duration),
        -webkit-transform var(--global-transition-duration);
}

.faq__accordion:has(input:checked) .faq__accordion-icon {
    -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
            transform: rotate(180deg);
}

.faq__accordion:has(input:checked) .faq__accordion-content {
    -ms-grid-rows: 1fr;
    grid-template-rows: 1fr;
}

.faq__accordion-content {
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: 0fr;
    grid-template-rows: 0fr;
    -webkit-transition: grid-template-rows var(--global-transition-duration);
    transition: grid-template-rows var(--global-transition-duration);
    transition: grid-template-rows var(--global-transition-duration), -ms-grid-rows var(--global-transition-duration);
}

.faq__accordion-body {
    font-size: 18rem;
    overflow: hidden;
}

.faq__accordion-body > *:first-child {
    -webkit-padding-before: 4rem;
            padding-block-start: 4rem;
}

.faq__accordion-body p {
    line-height: 21rem;
    color: rgba(0, 0, 0, 0.75);
}

.faq__accordion-body p:not(:first-child) {
    -webkit-margin-before: 16rem;
            margin-block-start: 16rem;
}

.faq__accordion-body h4 {
    font-weight: 600;
    line-height: 24rem;
    color: var(--color-secondary);
    letter-spacing: -0.72rem;
}

.faq__accordion-body h4:not(:first-child) {
    -webkit-margin-before: 40rem;
            margin-block-start: 40rem;
}

.faq__accordion-body ul {
    line-height: 20rem;
    letter-spacing: 0.18rem;
    color: var(--color-secondary);
    border-radius: 50%;
}

.faq__accordion-body ul:not(:first-child) {
    -webkit-margin-before: 16rem;
            margin-block-start: 16rem;
}

.faq__accordion-body ul li {
    position: relative;
    -webkit-padding-start: 30rem;
            padding-inline-start: 30rem;
}

.faq__accordion-body ul li:before {
    content: '';
    width: 20rem;
    height: 20rem;
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    background: url('../../img/faq/icons/ul.svg') center/contain no-repeat;
}

.faq__accordion-body ul li:not(:first-child) {
    -webkit-margin-before: 16rem;
            margin-block-start: 16rem;
}

.faq__accordion-body ol {
    counter-reset: accordionOlItem;
    line-height: 20rem;
    letter-spacing: 0.18rem;
    color: var(--color-secondary);
}

.faq__accordion-body ol:not(:first-child) {
    -webkit-margin-before: 16rem;
            margin-block-start: 16rem;
}

.faq__accordion-body ol li {
    position: relative;
    -webkit-padding-start: 30rem;
            padding-inline-start: 30rem;
    counter-increment: accordionOlItem;
}

.faq__accordion-body ol li:before {
    content: counter(accordionOlItem) '.';
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    font-weight: 700;
}

.faq__accordion-body ol li:not(:first-child) {
    -webkit-margin-before: 16rem;
            margin-block-start: 16rem;
}

.faq__accordion-body a {
    display: inline;
    color: var(--color-primary);
    text-decoration: underline;
    -webkit-transition: text-decoration-color var(--global-transition-duration);
    transition: text-decoration-color var(--global-transition-duration);
}

.faq__accordion input {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    height: 100%;
    opacity: 0;
}

.faq__accordion:has(input:focus-visible) .faq__accordion-header {
    outline: 2rem solid var(--color-primary);
    outline-offset: 2rem;
    border-radius: 4rem;
}

.faq__accordion:has(input:focus) .faq__accordion-title {
    color: var(--color-primary);
}

.faq__accordion:has(input:focus) .faq__accordion-icon {
    stroke: var(--color-primary);
}

.faq__accordion:has(input:checked) .faq__accordion-title {
    color: var(--color-primary);
}

.faq__accordion:has(input:checked) .faq__accordion-icon {
    stroke: var(--color-primary);
}

@media screen and (min-width: 1024px) and (orientation: landscape) {
    .faq__container {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
    }

    .faq__images--right {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        padding-block: 30rem;
    }

    .faq__image--spaced-top {
        -webkit-margin-before: 94rem;
                margin-block-start: 94rem;
    }
}

@media (hover: hover) {
    .faq__accordion-header:hover .faq__accordion-title {
        color: var(--color-primary);
    }

    .faq__accordion-header:hover .faq__accordion-icon {
        stroke: var(--color-primary);
    }

    .faq__accordion-body a:hover {
        text-decoration-color: transparent;
    }
}

@media (hover: none) {
    .faq__accordion-body a:focus {
        text-decoration-color: transparent;
    }
}