<div class="card" style ="background-image: linear-gradient(rgba(256, 256, 256, 0.7), rgba(256, 256, 256, 0.7)), url('/media/img/menu/1.jpg'); background-size: cover;" data-modal="articleModalPlan">
  <h3>Черчение</h3>
  <p>Нажмите, чтобы прочитать статью</p>
</div>

<div class="card" style ="background-image:linear-gradient(rgba(256, 256, 256, 0.7), rgba(256, 256, 256, 0.7)), url('/media/img/menu/2.jpg');background-size: cover;" data-modal="articleModalDesign">
  <h3>Дизайн</h3>
  <p>Нажмите, чтобы прочитать статью</p>
</div>

<div class="card" style ="background-image:linear-gradient(rgba(256, 256, 256, 0.7), rgba(256, 256, 256, 0.7)), url('/media/img/menu/3.jpg');background-size: cover; background-position: right center;" data-modal="articleModalArt">
  <h3>ИЗО</h3>
  <p>Нажмите, чтобы прочитать статью</p>
</div>

<div class="card" style ="background-image:linear-gradient(rgba(256, 256, 256, 0.7), rgba(256, 256, 256, 0.7)), url('/media/img/menu/4.jpg');background-size: cover; background-position: right center; "  data-modal="articleModalDaa">
  <h3>Декоративно-прикладное искусство</h3>
  <p>Нажмите, чтобы прочитать статью</p>
</div>

<!-- СТАТЬИ -->    
<div id="articleModalPlan" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <h2>Черчение</h2>
    <p>Текст статьи о черчении...</p>
  </div>
</div>

<div id="articleModalDesign" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <h2>Дизайн</h2>
    <p>Текст статьи о Дизайне...</p>
  </div>
</div>

<div id="articleModalArt" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <h2>ИЗО</h2>
    <p>Текст статьи о изобразительном искусстве...</p>
  </div>
</div>

<div id="articleModalDaa" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <h2>Декоративно-прикладное искусство</h2>
    <p>Текст статьи о Декоративно-прикладном искусстве ...</p>
  </div>
</div>

       body {

    

    width: 393px;

        margin: 70px auto 20px auto;

    }

        .card {

        background-color: #fff;

        padding: 20px;

        border-radius: 20px;

        box-shadow: 0  0  10px rgba(0, 0, 0, 0.2);

        text-align: center;

        margin: 10px 0 5px 0;

    }

        /* Модальные окна */

    

    .modal {

        display: none;

        position: fixed;

        z-index: 1;

        left: 0;

        top: 0;

        width: 100%;

        height: 100%;

        overflow: auto;

        background-color: rgba(0, 0, 0, 0.7);

        opacity: 0;

        transition: opacity 0.3s ease;

        z-index: 200;

    }

    

    .modal.show {

        display: block;

        animation: modalFadeIn 0.3s forwards;

    }

    

    .modal-content {

        margin: 70px 5px;

        padding: 20px;

        max-width: 600px;

        max-height: 80%;

        overflow: auto;

        position: relative;

        background-color: white;

        opacity: 0;

        transform: scale(0.8);

        transition: opacity 0.3s ease, transform 0.3s ease;

        background-color: #fff;

        padding: 20px;

        border-radius: 20px;

        box-shadow: 0  0  10px rgba(0, 0, 0, 0.2);

        text-align: center;

    }

    

    .show .modal-content {

        opacity: 1;

        transform: scale(1);

    }

    

    .close {

        position: absolute;
      
        user-select: none;
      
        top: 0;

        right: 10px;

        font-size: 24px;

        font-weight: bold;

        cursor: pointer;

    }

    

    @keyframes modalFadeIn {

        from {

            opacity: 0;

        }

        to {

            opacity: 1;

        }

    }

    

function modalEvent(event){
    let card = event.target.className === "card" ? event.target : event.target.closest('.card');
  if (card){
    event.preventDefault();
    let md = card.dataset.modal,
        modal = document.getElementById(md);
    modal && modal.classList.add('show');
    return !1;
  }
  let close = event.target.className === "close" ?  event.target.closest('.modal') : (event.target.classList.contains("modal") ? event.target : undefined);
  if(close){
    event.preventDefault();
    close.classList.remove('show');
    return !1;
  }
}

document.addEventListener('click', modalEvent);