
.bank-cards__inner {
    display: flex;
    gap: 2rem;
    margin-top: 2rem;
    margin-bottom: 1.9375rem;


}
.bank-cards__inner {
    flex-direction: column;
}
/*.bank-cards__inner.archive{*/
/*    column-count:4;*/
/*}*/
.archive-buttons {
    text-align: center;
}
@media (max-width: 768px) {
    .bank-cards__inner {
        margin-top: 1.5rem;
        gap: .75rem
    }
}

.bank-cards__accordion {
    position: relative
}

.bank-cards__accordion .bank-cards__inner {
    margin: 0
}

.bank-cards__accordion .accordion__toggle {
    padding: 1rem 0
}

.bank-cards__accordion .accordion__toggle::after {
    content: "";
    position: relative;
    width: 1.5rem;
    height: 1.5rem;
    transition: transform .3s ease;
    background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2224%22%20height%3D%2225%22%20viewBox%3D%220%200%2024%2025%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0D%0A%3Cpath%20fill%3D%22none%22%20d%3D%22M19.5%208.75L12%2016.25L4.5%208.75%22%20stroke%3D%22%237E94B4%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%0D%0A%3C%2Fsvg%3E') no-repeat center;
    background-size: contain
}

.bank-cards__accordion .accordion._opened .accordion__toggle::after {
    transform: rotate(180deg)
}


.bank-card {
    position: relative;
    display: grid;
    box-sizing: border-box;
    gap: 4.25rem;
    align-items: center;
    justify-content: space-between;

    border-radius: .625rem;
    background: var(--gray-haven);
}

.bank-cards__inner .bank-card {
    grid-template-columns:1fr minmax(auto, 18.75rem);
    padding: 3rem 7.5rem 3rem 2.5rem;
    overflow: hidden
}

/*.archive .bank-card{*/
/*    max-width: 16rem;*/
/*    padding: 2rem;*/
/*}*/
.accordion._loaded.archive .accordion__content {
    display: none;
}
.accordion._opened.archive .accordion__content {
    display: block;
}

@media (max-width: 768px) {
    .bank-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 2.5rem 1.5rem 2rem;
        gap: 2.5rem
    }
}

@media (max-width: 520px) {
    .bank-cards__inner .bank-card {
        padding: 2.5rem 1.6875rem;
    }
}

.bank-card__content {
    position: relative;
    z-index: 2
}
/*.archive .bank-card__content{*/
/*    width: 15rem;*/
/*}*/

@media (max-width: 768px) {
    .bank-card__content {
        order: 2;
        width: 100%
    }
}

.bank-card__title {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
    gap: .75rem
}

@media (max-width: 768px) {
    .bank-card__title {
        margin-bottom: 1.5rem
    }
}

.bank-card__advantages {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 2.5rem
}

@media (max-width: 768px) {
    .bank-card__advantages {
        display: flex;
        flex-direction: column;
        margin-bottom: 2rem;
        row-gap: .75rem
    }
}

.bank-card__advantages._title {
    margin-bottom: 0
}

.bank-card__advantages._title .bank-card__advantage-text {
    display: none
}

@media (max-width: 768px) {
    .bank-card__advantages._title .bank-card__advantage-text {
        display: block
    }
}

@media (max-width: 768px) {
    .bank-card__advantages._title {
        margin-bottom: 2rem
    }
}

@media (max-width: 768px) {
    .bank-card__advantages:not(._title) {
        display: none
    }
}

@media (max-width: 768px) {
    .bank-card__advantage {
        display: grid;
        grid-template-columns:1fr 1fr;
        gap: .625rem
    }
}

.bank-card__advantage-title {
    margin-bottom: 1.25rem;
    font: var(--font-body-m);
    color: var(--dark-space)
}

@media (max-width: 768px) {
    .bank-card__advantage-title {
        margin: 0;
        padding-top: .2em
    }
}

.bank-card__advantage-text {
    font: var(--font-accent-l)
}

@media (max-width: 768px) {
    .bank-card__advantage-text {
        min-width: 10rem;
        font: var(--font-accent-l)
    }

    .bank-card__advantage-text br {
        display: none
    }
}

.bank-card__buttons {
    display: flex;
    gap: .75rem
}

@media (max-width: 768px) {
    .bank-card__buttons {
        flex-direction: column
    }
}

.bank-card__picture-wrapper {
    position: relative;
    width: 18.75rem;
    height: 11.875rem;
    margin-left: auto
}
/*.archive .bank-card__picture-wrapper {*/
/*    position: relative;*/
/*    width: 12rem;*/
/*    height: 7.875rem;*/
/*    margin-left: unset;*/
/*}*/

@media (max-width: 768px) {
    .bank-card__picture-wrapper {
        width: 18.75rem;
        margin: 0;
        padding-bottom: 0
    }
}

@media (max-width: 520px) {
    .bank-card__picture-wrapper {
        width: 100%;
        height: auto;
    }
}

.bank-card__picture-wrapper::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 1.375rem;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    filter: blur(3.75rem);
    opacity: .8;
    width: 65.3333333333%;
    padding-bottom: 65.3333333333%
}

@media (max-width: 768px) {
    .bank-card__picture-wrapper::after {
        top: 2.8125rem;
        opacity: .6;
        width: 50%;
        padding-bottom: 50%
    }
}

.bank-card__picture-wrapper._purple::after {
    background: var(--electric-purple)
}

.bank-card__picture-wrapper._lime::after {
    background: var(--lime)
}

.bank-card__picture-wrapper._aquamarine::after {
    background: var(--aquamarine)
}

.bank-card__picture-wrapper._grey::after {
    background: var(--grey);
    opacity: .4
}

.bank-card__picture-wrapper._green::after {
    background: var(--green);
    opacity: .4
}

.bank-card__picture {
    display: block;
    position: relative;
    z-index: 3;
    width: inherit;
    height: inherit;
    border-radius: .75rem;
    overflow: hidden
}

.bank-card__picture img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}
.card__buttons ul {
    display: block;
    padding-top: 1.5rem
}
