/* :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 {
        -webkit-backdrop-filter: blur(5px) opacity(1);
        backdrop-filter: blur(5px) opacity(1);
        width: 100%;
        position: fixed;
        left: 0;
        top: 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: max-content;
          width: 100%;
          max-width: 643px;
          height: 100vh;
          /* max-height: 100vh; */
          margin: 0vh auto auto;
          /* flex-wrap: nowrap; */
          overflow: auto;
          /* padding-bottom: 5%; */
          /* align-content: center; */
          opacity: 0;
        }

        .modal-content {
          /* width: 90%; */
          /* max-width: 670px; */
          height: 100%;
          /* max-height: 100vh; */
          /* 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: absolute;
          top: 86%;
          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;
            }
        }

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