<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" onclick="openModal(this)">

      <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" onclick="openModal(this)">

      <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" onclick="openModal(this)">

      <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" onclick="openModal(this)">

      <h3>Декоративно-прикладное искусство</h3>

      <p>Нажмите, чтобы прочитать статью</p>

    </div>

 </div>

      <!-- СТАТЬИ -->    

        <div id="articleModalPlan" class="modal" onclick="closeModal('articleModalPlan')">

        <div class="modal-content"> <span class="close" onclick="closeModal('articleModalPlan')">&times;</span>

            <h2>Черчение</h2>

            <p>Текст статьи о черчении...</p>

        </div>

    </div>

    

        <div id="articleModalDesign" class="modal" onclick="closeModal('articleModalDesign')">

      <div class="modal-content">

        <span class="close" onclick="closeModal('articleModalDesign')">&times;</span>

        <h2>Дизайн</h2>

        <p>Текст статьи о Дизайне...</p>

      </div>

    </div>

    

        <div id="articleModalArt" class="modal" onclick="closeModal('articleModalArt')">

      <div class="modal-content">

        <span class="close" onclick="closeModal('articleModalArt')">&times;</span>

        <h2>ИЗО</h2>

        <p>Текст статьи о изобразительном искусстве...</p>

      </div>

    </div>

    

        <div id="articleModalDaa" class="modal" onclick="closeModal('articleModalDaa')">

      <div class="modal-content">

        <span class="close" onclick="closeModal('articleModalDaa')">&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;

    }

    

    .modal-content.show {

        opacity: 1;

        transform: scale(1);

    }

    

    .close {

        position: absolute;

        top: 0;

        right: 10px;

        font-size: 24px;

        font-weight: bold;

        cursor: pointer;

    }

    

    @keyframes modalFadeIn {

        from {

            opacity: 0;

        }

        to {

            opacity: 1;

        }

    }

    

   function openModal(element) {

          var modalId = element.dataset.modal;

          var modal = document.getElementById(modalId);

          var modalContent = modal.querySelector(".modal-content");

          modal.classList.add("show");

          modalContent.classList.add("show");

      }

      

      function closeModal(modalId) {

          var modal = document.getElementById(modalId);

          var modalContent = modal.querySelector(".modal-content");

          modalContent.classList.remove("show");

          modal.addEventListener("transitionend", () => {

              modal.classList.remove("show");

          }, {

              once: true

          });

      }