.modal {
    visibility: visible;
    position: relative;
    position: fixed; /* Stay in place */
    z-index: 9999; /* Sit on top */
    right: 1rem;
    bottom: 1rem;
    left: auto;
    height: auto;
    height: auto;
    width: 25vw;
    width: 25dvw;
    overflow: auto;
    background-color: var(--white);
    box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.25);
    padding: var(--distance-small);
  }
  
  .modal-close {
    position: absolute;
    color: var(--black);
    top: 1rem;
    right: 1rem;
    font-size: 32px;
    font-weight: normal;
    line-height: 0.5;
  }
  
  .modal-close:hover,
  .modal-close:focus {
    color: var(--brown);
    text-decoration: none;
    cursor: pointer;
  } 

  .modal-inner p{
    font-size: var(--mini);
  }

  .modal-inner h1,
  .modal-inner h2,
  .modal-inner h3,
  .modal-inner h4,
  .modal-inner p {
    margin: 0 0 0.75rem 0;
    max-width: none;
  }

  .modal-inner p:last-of-type {
    margin: 0;
  }

  @media screen and (max-width: 48rem) {
    .modal {
      width: auto;
      left: 1rem;
    }
  }