modal-element {
  @apply fixed top-0 left-0 h-full w-full z-50 bg-content/10 transition-all opacity-0 invisible overflow-y-auto;

  &.open {
    @apply visible opacity-100 backdrop-blur-lg;
  }
}

.modal {
  @apply p-8 pt-11 rounded-t-[2rem] md:rounded-xl bg-main shadow-2xl
    fixed bottom-0 left-0 w-full max-h-[85%] overflow-auto

    before:absolute before:top-4 before:left-1/2 before:-translate-x-1/2 before:w-[40px] before:h-1 before:bg-line before:rounded-full before:transform before:transition-all before:group-[[clicked]]/modal:scale-x-125
    
    md:max-h-none
    md:overflow-visible
    md:before:hidden
    md:pt-8
    md:w-[480px]
    md:absolute 
    md:-translate-x-1/2 
    md:bottom-auto
    md:top-40
    md:left-1/2 
    
    transition-all 
    md:group-[[clicked]]/modal:scale-105;
}