@layer components-entities {
    .two-way-card {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        display: block;
        height: 100%;
        cursor: pointer;
        perspective: 1000px;
        transform-style: preserve-3d
    }

    .two-way-card__card {
        z-index: 20;
        display: grid;
        height: 100%;
        transition: all 600ms;
        border-radius: 4px;
        background-color: var(--gray);
        transform-style: preserve-3d
    }

    .two-way-card__front {
        transform: translateZ(0)
    }

    .two-way-card__front, .two-way-card__back {
        grid-row: 1/2;
        grid-column: 1/2;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
        min-height: 220px;
        padding: 20px;
        border-radius: var(--br4);
        backface-visibility: hidden
    }

    @media screen and (max-width: 767px) {
        .two-way-card__front, .two-way-card__back {
            min-height: 164px;
            padding: 12px
        }
    }.two-way-card__back {
         transform: rotateY(180deg)
     }

    .two-way-card__head {
        display: flex;
        justify-content: space-between
    }

    .two-way-card__icon {
        width: 24px;
        height: 24px
    }

    .two-way-card__checkbox {
        display: none
    }

    .two-way-card__checkbox:checked + .two-way-card__card {
        transform: rotateY(-180deg)
    }

    .two-way-card_with-image .two-way-card__card {
        min-height: 432px
    }

    @media screen and (max-width: 767px) {
        .two-way-card_with-image .two-way-card__card {
            min-height: unset
        }
    }.two-way-card_with-image .two-way-card__front, .two-way-card_with-image .two-way-card__back {
         justify-content: unset
     }

    @media screen and (max-width: 767px) {
        .two-way-card_with-image .two-way-card__front, .two-way-card_with-image .two-way-card__back {
            justify-content: space-between
        }
    }.two-way-card_with-image .two-way-card__image-front {
         position: absolute;
         z-index: -1;
         right: 0;
         bottom: 0;
         max-width: 384px
     }

    @media screen and (max-width: 1023px) {
        .two-way-card_with-image .two-way-card__image-front {
            max-width: 210px
        }
    }@media screen and (max-width: 767px) {
    .two-way-card_with-image .two-way-card__image-front {
        display: none
    }
}.two-way-card_blue .two-way-card__front {
     background-color: var(--primary-blue)
 }

    .two-way-card_blue .two-way-card__back {
        background-color: var(--primary-blue)
    }

    .two-way-card_blue .two-way-card__icon {
        color: var(--primary-white)
    }
}