/* :root {
        --white: #fff;
        --black : #000;
        --gsap_beige: #fffce1;
        --base-width: 50px;
      } */

      .wrapper-modal {
        position: relative;

        .open-modal {
          /* position: relative; */
          display: block;
          width: 25%;
          height: var(--base-width);
          color: var(--white);
          border-radius: 30px;
          font-weight: bold;
          z-index: 1;
        }

        .open-modal:hover {
          scale: 105%;
          cursor: pointer !important;
        }
      }

      .modal {
        width: 100%;
        position: fixed;
        left: 0;
        bottom: 0;
        right: 0;
        align-items: center;
        justify-content: center;
        background: var(--black);
        visibility: hidden;
        opacity: 0.5;
        z-index: 2;

        &,
        .close-modal {
          top: 0;
          color: var(--white);
        }

        .modal-dialog {
          -webkit-backdrop-filter: blur(5px) opacity(1);backdrop-filter: blur(5px) opacity(1);
          /* background-color: #d9afafcc; */
          display: grid;
          grid-template-rows: min-content;
          width: 90%;
          max-width: 670px;
          height: 50%;
          max-height: 80vw;
          margin: 20vh auto auto;
          /* flex-wrap: nowrap; */
          overflow: hidden;
          padding-bottom: 5%;
          /* align-content: center; */
          opacity: 0;
        }

        .modal-content {
          /* width: 90%; */
          /* max-width: 670px; */
          height: 100%;
          /* padding: 2%; */
          align-content: center;
          margin: auto;
          color: white;
          /* background-color: #fff; */
          overflow: auto;
          position: relative;
          line-height: 3.3rem;
          font-size: 22px;

          p + p {
            margin-top: 1rem;
          }
        }

        .close-modal {
          position: relative;
          float: right;
          font-size: 1.8rem;
          color: white;
          background: none;
          border: none;
          text-align: end;
          margin: 1%;
          cursor: pointer;
        }

        @media screen and (max-width: 750px) {
            .modal-content {          
                line-height: 7vw;
                font-size: 3vw;
            }
        }
      }