#brend {
    padding: 0;
    overflow: hidden;
    box-shadow: 0px 4px 5px 1px #00000026;
}

.brend_block {
    background-image: url(../assets/white-paper.jpg);
    width: 100%;
    box-shadow: 0px 2px 6px 2px #00000026;
    position: relative;
}

body.dark .brend_block {
    background-image: url(../assets/paper_head.jpg);
}

.brend_block:before {
    content: "";
    position: absolute;
    bottom: 20px;
    width: 100%;
    left: 0;
    height: 2px;
    background: linear-gradient(270deg, #4D4336 0.05%, #714A27 63.49%, #8B6849 78.97%, #5E5548 98.45%);
}

.brend_block:after {
    content: "";
    position: absolute;
    top: 19px;
    width: 100%;
    left: 0;
    height: 2px;
    background: linear-gradient(270deg, #4D4336 0.05%, #714A27 63.49%, #8B6849 78.97%, #5E5548 98.45%);
}

body.dark .brend_block:before {
    background: linear-gradient(180deg, #877751 0%, #69582A 63.5%, #8B7336 79%, #65562F 98.5%);
}

body.dark .brend_block:after {
    background: linear-gradient(180deg, #877751 0%, #69582A 63.5%, #8B7336 79%, #65562F 98.5%);
}

.brend_inblock {
    position: relative;
    width: 100%;
    max-width: 1648px;
    height: 100%;
    display: flex;
    margin: 0 auto;
    flex-direction: column;
    padding: 112px 0 114px;
    gap: 94px;
}

.card_back_setka {
    width: 100%;
    height: 100%;
    background-image: url(../assets/cardBack.svg);
    padding: 40px 32px;
}

body.dark .card_back_setka {
    background-image: url(../assets/cardBack_b.svg);
}

.brend_border {
    position: relative;
    width: 100%;
    height: 100%;
}

.brend_border:before {
    content: "";
    position: absolute;
    bottom: 9px;
    width: 100%;
    left: 0;
    height: 6px;
    background: linear-gradient(270deg, #4D4336 0.05%, #714A27 63.49%, #8B6849 78.97%, #5E5548 98.45%);
}

.brend_border:after {
    content: "";
    position: absolute;
    top: 9px;
    width: 100%;
    left: 0;
    height: 6px;
    background: linear-gradient(270deg, #4D4336 0.05%, #714A27 63.49%, #8B6849 78.97%, #5E5548 98.45%);
}

body.dark .brend_border:before {
    background: linear-gradient(180deg, #877751 0%, #69582A 63.5%, #8B7336 79%, #65562F 98.5%);
}

body.dark .brend_border:after {
    background: linear-gradient(180deg, #877751 0%, #69582A 63.5%, #8B7336 79%, #65562F 98.5%);
}

.spear {
    position: absolute;
    bottom: -60px;
    left: 0;
    padding: 0 16px;
}

body.dark .spear {
    opacity: 0.2;
}

.brend_head {
    padding: 0 80px;
    text-align: left;
    max-width: 1200px;
    position: relative;
}

.brend_title {
    text-transform: uppercase;
}

.brend_title span {
    color: var(--red-70);
}

body.dark .brend_title span {
    color: #BD9C49;
    background: linear-gradient(180deg, #FFE5A3 0%, #CBA74C 63.5%, #EECE7F 79%, #8C7845 98.5%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    text-shadow: none;
}

.brend_cards {
    padding: 0 16px 0;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    gap: 32px;
    justify-content: center;
    cursor: pointer;
    flex-wrap: wrap;
}

.petlya {
    position: absolute;
    display: block;
}

body.dark .petlya {
    opacity: 0.2;
}

.petlyal {
    bottom: 45px;
    left: 20px;
}

.petlyar {
    bottom: 45px;
    right: 20px;
    transform: rotate(270deg);
}

.petlyart {
    top: 40px;
    transform: rotate(178deg);
    right: 20px;
}

.petlyalt {
    top: 40px;
    transform: rotate(88deg);
    left: 20px;
}

.flip_card {
    width: 272px;
    height: 408px;
    border-radius: 20px;

    perspective: 1000px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease-out;
}

.flip_card_face,
.flip_card_back {
    background: #FFFFFF;
    width: 272px;
    height: 408px;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    position: absolute;
    backface-visibility: hidden;
    transition: transform 0.6s;
    box-shadow: 0px 2px 6px 2px #00000026, 0px 2px 4px 0px #0000004D;
}

body.dark .flip_card_face,
body.dark .flip_card_back {
    background: url(../assets/paper_black.jpg);
}

.flip_card_face {
    padding: 38px 37px 40px 36px;
}

.flip_card_back {
    background: linear-gradient(330.69deg, #330303 35.61%, #800707 52.17%, #330303 68.74%);
}

.flip_card_text p {
    font-family: Evolventa;
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    color: var(--primary-black);
}

body.dark .flip_card_text p {
    color: #E7E7E7;
}

.flip_card_text {
    background-image: url(../assets/white-paper.jpg);
    display: flex;
    flex-direction: column;
    border-radius: 9px;
    width: 100%;
    height: 100%;
    gap: 8px;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 0 6px;
}

body.dark .flip_card_text {
    background-image: url(../assets/paper_black.jpg);
}

body.dark .flip_card_text img {
    filter: brightness(0) saturate(100%) invert(60%) sepia(53%) saturate(387%) hue-rotate(5deg) brightness(89%) contrast(90%);
}

.first_layer {
    background-image: url(../assets/white-paper.jpg);
    border-radius: 14px;
    width: 100%;
    height: 100%;
    padding: 4px;
}

body.dark .first_layer {
    background-image: url(../assets/paper_black.jpg);
    background-size: cover;
}

.border_card {
    background: linear-gradient(180deg, #4D4336 0%, #714A27 63.5%, #AA8E75 79%, #5E5548 98.5%);
    padding: 1px;
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

body.dark .border_card {
    background: #AF934C;
}

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

.flip_card_back {
    transform: rotateY(180deg);
}

.flip_card.flipped .flip_card_face {
    transform: rotateY(180deg);
}

.flip_card.flipped .flip_card_back {
    transform: rotateY(0deg);
}

.card_pic {
    position: relative;
    z-index: 2;
}

.card_framer {
    position: absolute;
    top: 25px;
    left: 55px;
}

.card_framel {
    position: absolute;
    bottom: 21px;
    right: 57px;
    transform: rotate(180deg);
}

body.dark .card_framer {
    filter: brightness(0) saturate(100%) invert(67%) sepia(3%) saturate(6906%) hue-rotate(8deg) brightness(85%) contrast(90%);
}

body.dark .card_framel {
    filter: brightness(0) saturate(100%) invert(67%) sepia(3%) saturate(6906%) hue-rotate(8deg) brightness(85%) contrast(90%);
}

.name_card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 45px;
    position: absolute;
}

body.dark .name_card img {
    filter: brightness(0) saturate(100%) invert(60%) sepia(53%) saturate(387%) hue-rotate(5deg) brightness(89%) contrast(90%);
}

.name_card_norm {
    top: 23px;
    left: 13px;
}

.name_card_revers {
    transform: rotate(180deg);
    bottom: 22px;
    right: 15px;
}

.card_letter {
    font-family: Colus;
    font-size: 54px;
    font-weight: 400;
    line-height: 54px;
    letter-spacing: -0.01em;
    text-align: center;
    color: var(--primary-black);
}

body.dark .card_letter {
    background: linear-gradient(180deg, #AF934C 0%, #DEBC66 50%, #AF934C 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.card_letter_red {
    color: var(--red-70);
}

.card_letter_gold {
    color: #997F59;
}

.card_letter_mini {
    font-family: Colus;
    font-size: 24px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.01em;
    text-align: center;
    color: #997F59;
}

body.dark .card_letter_mini {
    color: #AF934C;
}

.pers_type {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 32px;
}

.clac {
    font-family: Open Sans;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.001em;
    text-align: left;
    color: var(--grey-80);
    padding: 17px 0 0 35px;
}

.type_name {
    width: 272px;
    font-family: Jost;
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    text-align: center;
    color: var(--primary-black);
    text-transform: uppercase;
    padding-bottom: 16px;
}

body.dark .type_name {
    color: #E7E7E7;
}

@media (max-width: 1520px) {
    .brend_cards {
        gap: 8px;
    }
}

@media (max-width: 1425px) {
    .brend_cards {
        gap: 40px;
    }
}

@media (max-width: 920px) {
    .brend_inblock {
        padding: 52px 0 52px;
        gap: 64px;
    }

    .spear {
        bottom: -40px;
        padding: 0;
        object-fit: none;
    }

    .brend_head {
        padding: 0 16px;
    }
}

@media (max-width: 480px) {

    .brend_title {
        text-align: center;
    }

}