.modal { position: fixed; left: 0; top: 0; bottom: 0; right: 0; inset-inline-start: 0px; inset-inline-end: 0px; width: fit-content; height: fit-content; max-width: 100vw; max-height: 100vh; padding: 20px var(--x-gap); margin: auto; opacity: 0; transform: translateY(-50px); transition: opacity 0.15s ease-out, transform 0.3s ease-out, overlay 0.3s ease-out allow-discrete, display 0.3s ease-out allow-discrete; } .modal[open] { opacity: 1; transform: none; } .modal::backdrop { opacity: 0; background-color: black; transition: display 0.15s allow-discrete, overlay 0.15s allow-discrete, opacity 0.15s; } .modal[open]::backdrop { opacity: .85; } .modal__inner { position: relative; border-radius: 10px; color: #656464; background: #fff; box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.25); width: 1024px; max-width: calc(100vw - 2* var(--x-gap)); } .modal__body { max-height: calc( 95vh - 6rem ); overflow-y: auto; } .modal__body::-webkit-scrollbar { width: 8px; } .modal__body::-webkit-scrollbar-thumb { background: var(--color-primary); } .modal__body::-webkit-scrollbar-thumb:hover { background: var(--color-secondary); } .modal__close { position: absolute; top: 20px; right: 20px; width: 21px; height: 21px; padding: 1em; cursor: pointer; background: url("https://www.trinitas.ventures/wp-content/themes/trinitas-2025/assets/images/icons/xmark.svg") no-repeat center / contain; background-size: 9px 9px; border-radius: 50%; background-color: #000; transition: background-color 0.15s; } .modal__close:hover { background-color: var(--color-primary); } @starting-style { .modal[open] { opacity: 0; transform: translateY(-50px); } .modal[open]::backdrop { opacity: 0; } } @media(min-width: 992px) { .modal__close { width: 3.75rem; height: 3.75rem; background-size: 25px 25px; } }  .call-to-action { color: #fff; background: linear-gradient( to bottom, var(--color-primary), var(--color-tertiary) 100% ); text-align: center; padding: calc( var(--y-gap) * 1.2 ) var(--x-gap); } .call-to-action p { max-width: 800px; margin-left: auto; margin-right: auto; text-wrap: pretty; }  .footer { color: white; background: linear-gradient(90deg, var(--color-quaternary) 0%, var(--color-quinary) 100%); } .footer__inner { display: grid; grid-template-areas: "contact" "menu" "copyright"; gap: var(--gap); padding: var(--y-gap) var(--x-gap); } .footer__label { font-weight: bold; margin-bottom: 5px; } .footer__logo { margin-bottom: 2.4rem; } .footer__location { display: grid; font-size: 1rem; line-height: 1.66667; max-width: 320px; margin-bottom: 2.5rem; } .footer__contact { grid-area: contact; } .footer__hour { display: flex; justify-content: space-between; gap: 10px; max-width: 300px; } .footer__sns { grid-area: sns; } .footer__information { font-size: 12px; line-height: 1.77778; margin-bottom: 1rem; } .footer__menus { grid-area: menu; display: grid; grid-template-columns: 1fr 1fr; gap: 7.98vw; } .footer__menus .menu { border-top: 1px solid rgba(255, 255, 255, 0.20); padding-top: 9px; font-size: 12px; line-height: 1.5; } .footer__menus .menu__link { margin-bottom: 18px; transition: color .2s ease-in-out; font-size: 1rem; } .footer__menus .menu__link:hover, .footer__menus .menu__link:focus { color: var(--color-tertiary); text-decoration: underline; } .footer__copyright { grid-area: copyright; display: grid; align-items: end; border-top: 1px solid #D4D2E3; padding-top: 20px; line-height: 1.4; gap: 20px; } .footer__copyright .menu, .footer__copyright .menu__item { display: inline; margin-bottom: 0; } .footer__separator::before, .footer__copyright .menu__item::before { content: " | "; margin: 0 5px; } .footer__copyright .menu__link { margin-bottom: 0; text-decoration: underline; opacity: .8; } .footer__disclaimer { display: inline-block; font-size: 10px; line-height: 1.4; max-width: 975px; opacity: .8; text-wrap: pretty; } .footer__jumpem { font-size: 12px; margin-top: .5rem; line-height: 1.4; } .footer__jumpem img { height: 1.05em; vertical-align: middle; margin-top: -1px; } .footer__icons { display: flex; gap: 1px; } .footer__information .menu__link { transition: color .2s ease-in-out; } .footer__information .menu__link:hover, .footer__information .menu__link:focus { color: var(--color-tertiary); text-decoration: underline; } /* */ @media(min-width: 992px) { .footer__inner { grid-template-areas: "contact menu" "copyright copyright" ; grid-template-columns: auto min-content; gap: 7.7rem var(--gap); } .footer__menus { grid-template-columns: 123px 208px; justify-content: end; } .footer__information { font-size: 1rem; } .footer__location { font-size:1.1rem; } .footer__copyright { grid-template-columns: 1fr 150px; justify-content: space-between; } }  .sns { display: flex; gap: 16px; } .sns__link svg { fill: white; transition: fill .2s ease; } .sns__link:hover svg { fill: var(--color-tertiary); }