.field-guide-infographic-modal {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  padding: 28px 24px;
  background:
    radial-gradient(circle at 50% 38%, rgba(219, 196, 143, 0.1), rgba(10, 12, 12, 0) 42%),
    rgba(8, 10, 10, 0.82);
  backdrop-filter: blur(5px) saturate(0.86);

}

.field-guide-infographic-dialog {
  position: relative;
  display: block;
  width: min(1120px, calc(100vw - 80px));
  max-height: min(860px, calc(100vh - 96px));
  border: 1px solid rgba(204, 180, 127, 0.38);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 1px, rgba(0, 0, 0, 0) 1px 8px),
    linear-gradient(180deg, #2d302f 0%, #181a19 100%);
  box-shadow:
    0 26px 64px rgba(0, 0, 0, 0.62),
    0 0 0 1px rgba(0, 0, 0, 0.82),
    0 0 44px rgba(196, 159, 83, 0.1),
    inset 0 1px 0 rgba(241, 222, 179, 0.12);

}

.field-guide-infographic-close {
  position: absolute;
  top: -15px;
  right: -15px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(232, 205, 143, 0.62);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(66, 61, 49, 0.98) 0%, rgba(28, 29, 27, 0.98) 100%);
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 238, 190, 0.22);
  cursor: pointer;

}

.field-guide-infographic-close::before,
.field-guide-infographic-close::after {
  content: "";
  position: absolute;
  width: 13px;
  height: 2px;
  border-radius: 999px;
  background: #f4e8cf;

}

.field-guide-infographic-close::before {
  transform: rotate(45deg);

}

.field-guide-infographic-close::after {
  transform: rotate(-45deg);

}

.field-guide-infographic-close:hover,
.field-guide-infographic-close:focus-visible {
  border-color: #f0ca6e;
  outline: none;
  background:
    linear-gradient(180deg, rgba(85, 73, 48, 0.98) 0%, rgba(40, 35, 28, 0.98) 100%);

}

.field-guide-infographic-image-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  max-height: min(860px, calc(100vh - 96px));
  padding: 8px;
  overflow: auto;
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0) 16%),
    #111312;

}

.field-guide-infographic-image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(842px, calc(100vh - 114px));
  margin: 0 auto;
  border: 1px solid rgba(183, 158, 104, 0.46);
  border-radius: 5px;
  background: #101110;
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(0, 0, 0, 0.72);
  user-select: none;

}

@media (max-width: 720px) {
.field-guide-infographic-modal {
    padding: 16px;
  
}

.field-guide-infographic-dialog {
    width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
  
}

.field-guide-infographic-close {
    top: 8px;
    right: 8px;
  
}

.field-guide-infographic-image-wrap {
    max-height: calc(100vh - 32px);
    padding: 6px;
  
}

.field-guide-infographic-image {
    max-height: calc(100vh - 44px);
  
}
}