pizza.krasnikov.pro/components/customer/pages/index/modals/pizza/styles/index.scss

.pizza_modal_card {
    display: block; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 100; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

    .dialog {
      @media (max-width:760px) {
          height: 533px;
          width: 400px;
          margin: 0 auto;
      }

      @media (min-width:780px) {
          position: fixed;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          height: 533px;
          width: 900px;
          -webkit-transform: translate(-50%, -50%);
          -moz-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          -o-transform: translate(-50%, -50%);
      }

        /* Modal Content */
      .content {
        background-color: #fefefe;
        margin: auto;
        @media (max-width:760px) {

        }
        @media (min-width:780px) {
          border-radius: 20px;
        }
        /*border: 1px solid #888;*/
        .body{
          height: 100%;
          flex-wrap: wrap;
          display: flex;

          .left{
            margin: 0 auto;
            float: left;
            position: static;
            display: flex;
            justify-content: center; /*Центрирование по горизонтали*/
            align-items: center;     /*Центрирование по вертикали */
            width: 400px;

            .img{
              text-align: center;
              height: 100%;
              display: grid;;
              justify-content: center; /*Центрирование по горизонтали*/
              align-items: center;     /*Центрирование по вертикали */
            }
          }

          .right{
            background: #F7F7F7;
            height: 500px;
            display: table;
            float: left;
            position: static;

            @media (max-width:760px) {
              width: 100vw;
            }

            @media (min-width:780px) {
              border-radius: 20px;
              width: 400px;
            }

            .header{
              height: 450px;
              letter-spacing: 0.02em;

              .title{
                font-size: 20px;
                line-height: 24px;
                color: #252A48;
                margin: 10px 10px 10px 15px;
              }
              .feature{
                font-size: 13px;
                line-height: 15px;
                margin: 10px 10px 10px 15px;
                color: #8E8E93;
              }

              .description{
                font-size: 13px;
                line-height: 15px;
                color: #252A48;
                margin: 10px 10px 10px 15px;
              }
              /* Блок переключения */
              @import 'block_selector';
              @import 'ingredients';
            }
          }
        }
      }
    }

    .modal_footer{
      display: table;
      margin: 0 auto;
      margin-top: 15px;
    }

    /* The Close Button */
    .close {
      color: #aaaaaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
    }

    .close:hover,
      .close:focus {
      color: #000;
      text-decoration: none;
      cursor: pointer;
    }
  }

  .position_product{
    padding-top: 100px;
    /* padding-top: 100px;
    right: 0;
    left: unset !important;
    position: absolute;*/
  }

  @media (max-width: 940px) {
    .pizza_modal_card {
      height: 100vh;
      width: 100vw;
    }
  }