body.locked {overflow-y: hidden;}
.modal__overlay {z-index: -1; position: fixed; width: 100%; height: 0px; background: rgba(0,0,0,.4); top: 0; pointer-events: none;}
.modal__wrapper {display: none; position: absolute; top: 5%; left: 50%; transform: translateX(-50%); background: white; padding: 1.5rem; border-radius: .75rem; max-width: 30%;}
.modal__overlay.active {z-index: 9999; pointer-events: auto; height: 100%; overflow-y: scroll;}
.modal__overlay.active .modal__wrapper {display: block;}
.modal__header {text-align: left; font-size: 2rem; font-weight: 600; line-height: 2.5rem; margin-bottom: 1rem;}
.modal__sender {display: flex; justify-content: center;}
.modal__input-group {display: flex; flex-wrap: nowrap; flex-direction: column; align-items: flex-start; margin-bottom: .5rem;}
.modal__input-group label {}
.modal__input-group input[type=text], .modal__input-group textarea {border: 1px solid var(--tw-ring-inset); width: 100%; border-radius: .5rem; padding: .5rem; resize: none;}
.modal__input-group p.helper {font-size: .8rem; color: #777; line-height: 1rem; margin-top: .5rem;}
.modal__close {position: absolute; width: 40px; height: 40px; top: 8px; right: 8px;}
.modal__close span {position: relative; display: block; width: 100%; height: 100%;}
.modal__close span::before {content: ''; top: 50%; width: 100%; position: absolute; display: block; border-top: 1px solid #777; transform: rotate(45deg);}
.modal__close span::after {content: ''; top: 50%; width: 100%; position: absolute; display: block; border-top: 1px solid #777; transform: rotate(-45deg);}
.modal__error {border: 1px solid #d00; background: rgba(255,0,0,.1); color: #700; text-align: center; border-radius: .5rem; transition: .5s all ease-in-out; width: 100%; height: 0; overflow: hidden; padding: 0; opacity: 0;}
.modal__error.active {margin-bottom: .5rem; opacity: 1; height: auto; padding: .5rem;}
.modal__error.success {border-color: #0d0; background: rgba(0,255,0,.1); color: #070;}
@media(max-width: 700px) {
	.modal__overlay {overflow: scroll;}
	.modal__wrapper {width: 100%; border-radius: 0; max-width: 100%; top: 0; transform: none; left: 0;}
	.modal__close {width: 10vw; height: 10vw; top: 2vw; right: 2vw;}
}

.big-top-banner {padding: 0;}
.big-top-banner__article {width: max-content; padding: .75rem; background: rgba(0,0,0,.7); border-radius: .75rem;}
@media(max-width: 500px) {
	.big-top-banner {overflow: hidden; max-width: 100%;}
	.big-top-banner__article {width: 100%; border-radius: 0;}
	.fantasy-hearts__article iframe {max-width: 100%;}
}

.modal__input-group textarea::placeholder {font-size: .8rem;}