/* 
** Layout, Text & Colors 
*/

body {
    /*background: #150f21;*/
    /*background-image: url(../image/foneDL_2_1230.png);*/
    font-size: 18px;
}


i {
    line-height: 1.5;
}


p {
    line-height: 1.5;
}

/* Скрываем текст в маленькой карточке */
.card p   {
    display: none;
}

/* Показываем текст в открытом окне */
.open-content .text p  {
    display: block;
}



.font-p {
    font-size: 20px;
}

.font-h1 a{
    font-size: 28px;
    border-radius: 7px 7px 7px 7px;
    color: black;
}



.containerCard {
    max-width: 100%; /*800px;*/            
    margin: 0 auto;
}

/* Cards */
.card-column {
    width: 50%;
    float: left;
    padding: 4%;
    box-sizing:border-box;
}

/*  !!!!!!!!  */
.column-1 {
    padding-top: 100px;
}


/**/
.card {
    width: 92%;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    /*background: #EB5160;
    color: #fff;*/
    cursor: pointer;
    margin-bottom: 60px;
}


/**/



.border {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 6px;
    border: 5px solid #656060; /*#fff*/
    opacity: 0.6;
    left: -9px;
    top: -9px;
}

.border2 {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 6px;
    border: 3px solid rgb(255, 255, 255, 0.72); /*#fff*/
    opacity: 0.6;
    left: -10px;
    top: -10px;
    border-radius: 7px 7px 7px 7px;
}

.border3 {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 6px;
    border: 3px solid rgb(255, 255, 255, 0.72); /*#fff*/
    opacity: 0.6;
   /* left: -10px;
    top: -10px;*/
    border-radius: 7px 7px 7px 7px;
}

.border-r {
    border: 7px rgb(255, 255, 255, 0.75);
    border-radius: 9px 9px 9px 9px;
}



.card h1 {
    position: relative;
    padding: 190px 70px 40px 10px;
    width: 90%;
    border-radius: 7px 7px 7px 7px
    font-size: 28px;
}

.card > img {
    width: 90%;
    position: absolute;
    top: -6%;
    left: -6%;
    border-radius: 7px 7px 7px 7px;
}

.card-color-0 {
    background-color: rgb(248 244 244);
    /*background-color: #EB5160;*/
}

.card-color-1 {
    background-color: rgb(184 241 225);
    /*background-color: #8F3985;*/
}

.card-color-2 {
    background-color: rgb(187 199 195);
    /*background-color: #8DAA91;*/
}

.card-color-3 {
    background-color: rgb(255, 255, 255, 0.38);
    /*background-image:url(../image/Dr1.png);
    opacity:0.9;*/
    /*background-color: #888DA7;*/
}

.card-color-4 {
    background-color: rgb(245 250 207);   
    /*background-color: #888DA7;*/
}


/* The cover (expanding background) */
/* Обложка (расширяющийся фон) */

.cover {
    position: fixed;
    /*background: #EB5160;*/
    z-index: 100; /*100;*/
    transform-origin: 50% 50%;
    /*50% 50%;*/
    
}

/* The open page content */
.open-content {
    width: 90%; /*100%*/
    /*height: auto;*/
    z-index: 110; /*110;*/
    position: absolute;
    opacity: 0;
    pointer-events: none;
   
}

    .open-content img {
        position: relative;
        width: 80%; /*90%*/
        /*height: auto;*/
        margin-left: 3%;
        margin-top: 20px;
        z-index: 5;
        border-radius: 7px 7px 7px 7px;
    }

    .open-content .text {
        background: rgb(255, 255, 255, 0.71); /*#fff;*/
        margin-top: -56%;
        padding: 60% 5% 5% 5%; /*60% 5% 5% 5%;*/
        width: 90%; /*80%;*/
        /*height:auto;*/
        margin-left: 5%;
        margin-bottom: 5%;
        border-radius: 15px 15px 15px 15px;
       font-size:20px;
        
        
    }

        .open-content .text h1, .open-content .text p {
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
                 
        }

.open-content .text h1{
font-size: 28px;
}

/**/
.close-content {
    display: block;
    position: absolute;
    right: 12px;
    top: 12px;
    width: 30px;
    height: 30px;
}

    .close-content span {
        background: #4a4444; /*#222;*/
        width: 30px;
        height: 6px;
        display: block;
        position: absolute;
        top: 14px;
    }
/**/


.x-1 {
    transform:rotate(45deg);
}

.x-2 {
    transform: rotate(-45deg);
}

/* 
** Transitions
*/

.card {
    transition: opacity 200ms linear 320ms, transform 200ms ease-out 320ms;
    border-radius: 7px 7px 7px 7px;   
    background-color:rgb(255, 255, 255, 0.00); /*прозорий !!!!! */
}

.border {
    transition: opacity 200ms linear, transform 200ms ease-out;
    border-radius: 7px 7px 7px 7px;
}

.border2 {
    transition: opacity 200ms linear, transform 200ms ease-out;
    border-radius: 7px 7px 7px 7px;
}

.card img {
    transition: opacity 200ms linear 0ms, transform 200ms ease-in 0ms;
   
}

.card h1 {
    transform: translate3d(20%, 0px, 0px);
    transition: opacity 200ms linear 120ms, transform 200ms ease-in 120ms;
    
}

/* Clicked card */
.card.clicked img {
    transform: translate3d(0px, -40px, 0px);
    opacity: 0;
   
}

.card.clicked .border {
    opacity: 0;
    transform: scale(1.3);
}



.card.out, .card.out img {
    transform: translate3d(0px, -40px, 0px);
    opacity: 0;
}

    .card.out h1, .card.clicked h1 {
        transform: translate3d(20%, -40px, 0px);
        opacity: 0;
    }

.cover {
    transition: transform 300ms ease-in-out;
}

.open-content {
    transition: opacity 200ms linear 0ms;
}

    .open-content.open {
        opacity: 1;
        pointer-events: all;
        transition-delay: 1000ms;

    }

/* 
** Media Queries
    Медиа-запросы
*/




@media screen and (max-width: 600px) {
    .card-column {
        width: 90%;
    }

    .column-1 {
        padding-top: 0px;
    }

    .open-content img {
        margin-top: 40px;
    }
}






/*
    как сделать что бы при открывание карточки, в каждой карточке был свой текст, который отличается от другого текств ?

*/

/*
    ответ в cshtml


*/







/*

    Теперь у вас есть полный комплект: JS отвечает за логику и расчеты, HTML за структуру, а CSS за визуализацию и плавность анимаций.
Как работает эта связка (анализ CSS):
Магия расширения (.cover):
В CSS зафиксировано position: fixed и z-index: 100. Это позволяет цветному блоку перекрывать весь контент.
transition: transform 300ms ease-in-out — именно эта строка делает переход от маленького прямоугольника к огромному фону плавным.
Эффект исчезновения карточек:
Когда JS добавляет класс .out или .clicked, срабатывают правила:
css
.card.out, .card.out img {
    transform: translate3d(0px, -40px, 0px);
    opacity: 0;
}
Используйте код с осторожностью.

Карточки не просто исчезают, а плавно «всплывают» вверх на 40 пикселей и растворяются.
Появление контента:
Класс .open-content.open имеет transition-delay: 1000ms. Это очень важный момент: текст и большая картинка появляются только через 1 секунду, когда анимация расширения фона (cover) уже полностью завершена.
Слои (Z-index):
Карточки лежат в обычном потоке.
cover (расширяющийся фон) имеет z-index: 100.
open-content (текст и кнопка закрытия) имеет z-index: 110. Это гарантирует, что текст всегда будет выше фонового цвета.
Несколько советов по улучшению:
Кнопка закрытия: В CSS у вас .close-content span имеет background: #222. Если фон вашей открытой карточки будет темным (например, темно-фиолетовым), крестик может быть плохо виден. Можно добавить border: 1px solid #fff, чтобы его выделить.
Адаптивность текста:
css
.open-content .text {
    margin-top: -56%;
    padding: 60% 5% 5% 5%;
}
Используйте код с осторожностью.

Этот прием (отрицательный margin и большой padding) используется, чтобы текст «обтекал» картинку, которая наложена сверху. Если на мобильных устройствах текст будет слишком низко, отрегулируйте padding-top.
Фикс для скролла: Когда карточка открыта, JS делает window.scroll(0, 0). В CSS полезно добавить body.noscroll { overflow: hidden; } и добавлять этот класс через JS, чтобы пользователь не мог прокручивать основную страницу, пока открыта карточка.
Что проверить:
В вашем HTML во второй и последующих карточках нет тега <p>. В CSS для .open-content .text p прописаны стили. Если вы планируете выводить описание, добавьте теги <p> во все карточки в HTML, иначе в открытом окне будет пустое место под заголовком.
Код готов к использованию! Он создает очень современный и "дорогой" интерфейс в стиле мобильных приложений.


*/