.inplace.modalcontainer {
  position: absolute;
  background: oklch(from var(--bgcolor)  l c h / 0.9);
  &>.modal {
    padding: 32px;
    background: none;
    width: 100%;
    height: 100%;
    flex-flow:column;
    max-height: unset;
    max-width: unset;
  }
  & .modaltitle {
    width: 100%;
    --_bgcolor: var(--textbgcolor);
    background: var(--_bgcolor);
    color: lch(from var(--_bgcolor) calc((49.44 - l) * infinity) 0 0);
    padding: 16px;
    margin: 0;
    text-align: center;
    flex:0;
  }
  & h2 {
    max-width: none;
  }
}
.modalcontainer {
  --_margin:40px;
  visibility: hidden;
  position:fixed;
  inset:0;
  display:flex;
  align-items: center;
  justify-content: center;
  background: rgba(77, 77, 77, .7);
  opacity:0;
  z-index:990;
  transition: all .4s;
  &#zoom {
    align-items:unset;
  }
  &:target, &:has(:target) {
    opacity: 1;
    visibility: visible;
  }
  & .modal {
    position: relative;
    contain: paint;
    --_bgcolor: var(--textbgcolor);
    background: var(--_bgcolor);
    color: lch(from var(--_bgcolor) calc((49.44 - l) * infinity) 0 0);
    line-height: 1.2em;
    display:flex;
    align-items:normal;
    max-height: 95cqh;
    max-width: 75cqw;
    & h2 {
      margin-block-end: 36px;
    }
    &:before {
      pointer-events:none;
      position:absolute;
      content:"";
      top:10px;
      left:20px;
    }
    &>div {
      overflow: auto;
    }
    &>img+div>.textblock {
      height:0;
      min-height:100%;
    }
    & p {
      text-transform: initial;
      line-height: 1.3em;
      & br {
        margin-block-end: 1em;
      }
    }
    & figure {
      text-align: center;
    }
    & img {
      max-width: 100%;
    }
    &>img {
      max-width:50%;
      object-fit:contain;
      object-position: top left;
    }
  }
}
a.modal__close {
  --_bgcolor: var(--textbgcolor);
  position: absolute;
  font-size: 1.5rem;
  top: 15px;
  right: 15px;
  color: lch(from var(--_bgcolor) calc((49.44 - l) * infinity) 0 0);
  text-decoration: none;
  background:var(--_bgcolor);
  padding:5px;
}
@media (aspect-ratio < 5/4) {
  .modalcontainer {
    &>.modal {
      flex-direction:column;
      align-items: center;
      overflow: auto;
      height:95cqh;
      width:95cqw;
      &>div {
        overflow: unset;
      }
      &>.modal__close {
        align-self:flex-end;
        position:sticky;
      }
      &>img {
        height:50cqh;
        width: auto;
        max-width: 100cqw;
      }
      &>div>.textblock, &>img+div>.textblock {
        height: unset;
        min-height: unset;
        max-height: unset;
        &>h2 {
          margin-block-start: 16px;
        }
      }
    }
  }
}