:root {
  --ci-black: #000000;
  --ci-cream: #f9f4eb;

  --color: var(--ci-black);
  --color-background: var(--ci-cream);

  --grid-columns: 12;
  --grid-margin: clamp(1rem, 0.1915rem + 2.31vw, 2.5rem);
  --grid-gutter: 1rem;
  --grid-column-width: calc(((var(--vw, 1vw) * 100) - (2 * var(--grid-margin))) / var(--grid-columns) - (var(--grid-gutter) * (var(--grid-columns) - 1) / var(--grid-columns)));

  --z-below: -1;
  --z-above: 1;
  --z-dialog: 300;

}

/* ========== part 01 ===============*/
.js-dialog_icon {
  width: 1.5rem;
  height: 1.5rem;
  -webkit-user-select: none;
  user-select: none;
  transform-style: preserve-3d;
  flex-shrink: 0;
  display: block;
  transform: translateZ(0);
}

.js-dialog {
  color: var(--color);
  z-index: var(--z-dialog);
  content-visibility: auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background-color: #0000;
  border-style: none;
  width: 100%;
  max-width: 100vw;
  height: 100%;
  min-height: 100dvh;
  max-height: 100lvh;
  margin: 0;
  padding: 0;
  display: grid;
  position: fixed;
  inset: 0%;
  overflow: hidden;
  z-index: 999;
}

.js-dialog_outer {
  padding-top: clamp(2rem, 1.461rem + 1.54vw, 3rem);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 100vw;
  display: flex;
  position: relative;
  overflow: hidden;
}

.js-dialog_button-close {
  color: var(--color-background);
  z-index: var(--z-above);
  background-color: #0000;
  border-style: none;
  padding: 0;
  position: relative;
}

.js-dialog_inner {
  margin-top: 2rem;
  padding-bottom: clamp(3rem, 1.922rem + 3.08vw, 5rem);
  background-color: #ececed;
  z-index: var(--z-above);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in hsl, var(--color), transparent 50%) transparent;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden auto;
}

.js-dialog_backdrop {
  background-color: color-mix(in hsl, var(--color), transparent 20%);
  opacity: 1;
  -webkit-backdrop-filter: blur(1.25rem);
  backdrop-filter: blur(1.25rem);
  cursor: no-drop;
  border-style: none;
  padding: 0;
  position: absolute;
  inset: 0%;
}

.js-dialog_drawer-button {
  height: clamp(2.5rem, 1.6915rem + 2.31vw, 4rem);
  padding: 1.5rem 0px 0px;
  cursor: grab;
  background-color: #0000;
  justify-content: center;
  align-items: flex-start;
  width: 100vw;
  display: flex;
  position: sticky;
  top: 0;
  border: 0px;
}

.js-dialog_drawer-hider {
  width: clamp(3rem, 1.922rem + 3.08vw, 5rem);
  background-color: color-mix(in hsl, var(--color), transparent 75%);
  -webkit-backdrop-filter: blur(1.5rem);
  backdrop-filter: blur(1.5rem);
  border-radius: .7125rem;
  height: .7125rem;
}

.js-dialog_block {
  padding-right: clamp(1rem, 0.1915rem + 2.31vw, 2.5rem);
  padding-left: clamp(1rem, 0.1915rem + 2.31vw, 2.5rem);
  grid-gap: 1rem;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  display: grid;
}

.js-dialog_content {
  grid-gap: 1rem;
  grid-column: 6 span;
  display: grid;
}

.js-dialog_visual {
  text-align: center;
  padding-left: calc((var(--grid-column-width) * 1) + (var(--grid-gutter) * (1 - 1)));
  grid-column: 6 span;
}

.js-dialog_visual-img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  max-height: 46.25rem;
}

@media screen and (max-width: 767px) {
  .js-dialog_content {
    grid-column: 1 / -1;
  }

  .js-dialog_visual {
    padding-left: calc((var(--grid-column-width) * 6) + (var(--grid-gutter) * (6 - 1)));
    order: -1;
    grid-column: 1 / -1;
  }

  .js-dialog_title {
    padding-top: 2rem;
  }

  .js-dialog_visual-number.u-h1 {
    bottom: auto;
  }
}

/* ========== part 01 end ===============*/
/* ========== part 02 ===============*/
.js-dialog {
  --dialog-animation-speed: .75s;
  /* this is your complete animation time */
  --backdrop-speed: .3s;
  --backdrop-ease: cubic-bezier(.62, .08, 0, 1);
  --modal-speed: .75s;
  --modal-ease: cubic-bezier(.62, .08, 0, 1);
  --close-button-speed: .45s;
  --close-button-ease: cubic-bezier(.62, .08, 0, 1);
  --content-speed: .45s;
  --content-ease: cubic-bezier(.215, .61, .355, 1);
  --content-stagger: .05s;
}

/* when reduced motion is activated in user settings */
@media screen and (prefers-reduced-motion) {
  .js-dialog {
    --dialog-animation-speed: .3s;
    /* this is your complete animation time */
    --backdrop-speed: .3s;
    --modal-speed: .3s;
    --close-button-speed: .3s;
  }
}

/* make the native backdrop invisible */
.js-dialog::backdrop {
  opacity: 0;
}

/* when grabbing set mouse to grabbing */
.js-dialog[data-dragging="true"],
.js-dialog[data-dragging="true"] .js-dialog_drawer-button {
  cursor: grabbing;
}

/* set hover and progress on drawer */
.js-dialog_drawer-hider {
  transition: width .45s cubic-bezier(.62, .08, 0, 1);
  position: relative;
}

.js-dialog_drawer-hider::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background-color: color-mix(in hsl, var(--color), transparent 25%);
  width: calc(5% + (95% * var(--progress)));
  opacity: clamp(0, calc((var(--progress) * 5)), 1);
  border-radius: .7875rem;
}

.js-dialog[data-dragging="true"] .js-dialog_drawer-hider {
  width: clamp(5rem, 3.6525rem + 3.85vw, 7.5rem);
}

@media (hover: hover) and (pointer: fine) {
  .js-dialog_drawer-button:hover .js-dialog_drawer-hider {
    width:clamp(5rem, 3.6525rem + 3.85vw, 7.5rem);
  }
}

/* modal animation */
.js-dialog:not([open]) {
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s linear var(--dialog-animation-speed);
}

.js-dialog[open] {
  transition-duration: var(--dialog-animation-speed);
}

/* initial state of actual modal */
.js-dialog:not([open]) .js-dialog_inner {
  transform: translate3d(0, 100%, 0);
}

.js-dialog_inner {
  contain: content;
  transform: translate3d(0, var(--ty, 0), 0);
  transition: transform var(--modal-speed) var(--modal-ease);
}

.js-dialog.no-transition .js-dialog_inner {
  transition: none;
}

.js-dialog_inner:focus-visible {
  outline-offset: -.25rem;
}

@media screen and (prefers-reduced-motion) {
  .js-dialog:not([open]) .js-dialog_inner {
    transform: translate3d(0, var(--ty, 0), 0);
    opacity: 0;
  }

  .js-dialog_inner {
    transition: opacity var(--modal-speed) var(--modal-ease);
  }
}

/* preload content for better performance */
.js-dialog_title,
.js-dialog_visual-number,
.js-dialog_visual-author,
.js-dialog_visual-img {
  content-visibility: auto;
  contain: layout style paint;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* initial state of close button */
.js-dialog:not([open]) .js-dialog_button-close {
  transform: translate3d(0, -.75rem, 0) scale(0.8);
  opacity: 0;
  transition: transform var(--close-button-speed) var(--close-button-ease), opacity var(--close-button-speed) var(--close-button-ease);
}


/*
.js-dialog_button-close {
  transition: transform var(--close-button-speed) .15s var(--close-button-ease), opacity var(--close-button-speed) .15s var(--close-button-ease);
  -webkit-tap-highlight-color: transparent;
}

.js-dialog_button-close::after {
  content: "";
  display: block;
  position: absolute;
  inset: -.75rem;
  background-image: url(../img/js-modal-close.svg);
  height: 3rem;
    width: 3rem;
    background-size: contain;
}
*/
/* NEW CLOSE STYLE*/


.js-dialog_button-close {
  transition: transform var(--close-button-speed) .15s var(--close-button-ease), opacity var(--close-button-speed) .15s var(--close-button-ease);
  background: #dededf;
    border: 1px solid #dededf;
    padding: 16px 11px;
    border-radius: 12px;
    color: #363131;
    font-size: 1.2rem;
    line-height: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 400ms ease;
    text-align: center;
    min-width: 48px;
    height: 48px;
    letter-spacing: -1.5px;
}
.js-dialog_button-close::after {
  content: "";
      display: block;
      position: absolute;
      background-image: url(../img/icon-close.svg);
      height: 1.2rem;
      width: 1.2rem;
      background-size: contain;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
}
.js-dialog_button-close:hover {
    background: #fff;
}

.js-dialog_button-close .js-dialog_icon {
  transition: transform .3s cubic-bezier(.62, .08, 0, 1);
}

@media (hover: hover) and (pointer: fine) {

  .js-dialog_button-close:hover .js-dialog_icon,
  .js-dialog_button-close:focus-visible .js-dialog_icon {
    transform: scale(1.1) translateZ(0);
  }
}

/* initial state of backdrop when modal is not opened */
.js-dialog:not([open]) .js-dialog_backdrop {
  opacity: 0;
}

.js-dialog_backdrop {
  transition: opacity var(--backdrop-speed) var(--backdrop-ease);
  -webkit-tap-highlight-color: transparent;
}

/* part 02 end*/
.modal-content {
	display: flex;
	width: 50%;
	padding-top: 3rem;
}
@media (max-width: 1024px) {
	.modal-content {
		display: flex;
		width: 100%;
		padding-top: 3rem;
	}
}