.m-empires-faq {
    color: var(--text-main)
}

.m-empires-faq .container {
    display: grid;
    gap: 64px;
    grid-template-columns: 37.6% auto
}

.m-empires-faq__info,.m-empires-faq__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    gap: 24px
}

.m-empires-faq__list-item {
    padding-bottom: 24px;
    padding-right: 40px;
    position: relative;
    width: 100%
}

.m-empires-faq__list-item:after {
    background: -webkit-gradient(linear,right top,left top,from(var(--gradient2-color-1)),color-stop(50%,var(--gradient2-color-2)),to(var(--gradient2-color-3))),#fff;
    background: linear-gradient(270deg,var(--gradient2-color-1) 0,var(--gradient2-color-2) 50%,var(--gradient2-color-3) 100%),#fff;
    bottom: 0;
    content: "";
    height: 2.4px;
    left: 0;
    position: absolute;
    width: 100%
}

.m-empires-faq__list-item[open] summary:after {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.m-empires-faq__list-item summary {
    cursor: pointer;
    list-style: none;
    position: relative
}

.m-empires-faq__list-item summary::-webkit-details-marker {
    display: none
}

.m-empires-faq__list-item summary:after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: var(--text-main);
    content: "";
    font-family: latter-icons;
    font-size: 24px;
    height: 40px;
    line-height: 40px;
    position: absolute;
    right: -40px;
    text-align: center;
    top: 0;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    width: 40px
}

.m-empires-faq__list-item__question {
    font-size: 24px;
    font-weight: 600;
    line-height: 130%
}

.m-empires-faq__list-item .text-block {
    margin-top: 8px
}

@media (width <= 1200px) {
    .m-empires-faq .container {
        gap: 32px
    }
}

@media (width <= 1000px) {
    .m-empires-faq .container {
        gap: 24px;
        grid-template-columns: repeat(1,1fr)
    }
}

@media (width <= 768px) {
    .m-empires-faq .container,.m-empires-faq__info,.m-empires-faq__list {
        gap: 16px
    }

    .m-empires-faq__list-item {
        padding-bottom: 16px
    }

    .m-empires-faq__list-item__question {
        font-size: 20px;
        font-weight: 600;
        line-height: 140%
    }
}