.infographic_content {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
}

.infographic_image,
.infographic_popup_image {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.infographic_popup_bg {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    max-width: 100vw !important;
    background-color: #2a2c2b99;
    opacity: 0;
    transition: all 0.2s ease-in-out;
    pointer-events: none;
    z-index: 100;
}

.infographic_popup {
    position: fixed;
    top: 50%;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90vw;
    max-height: 80vh;
    max-width: 100vw;
    padding: var(--wp--preset--spacing--70);
    margin: 0;
    margin-block: 0 !important;
    background-color: var(--wp--preset--color--base);
    border-radius: var(--wp--preset--spacing--40);
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: all 0.2s ease-in-out;
    pointer-events: none;
    z-index: 101;
}

.infographic_popup--active,
.infographic_popup_bg--active {
    opacity: 1;
    pointer-events: all;
}

.infographic_popup_image {
    max-height: calc(90vh - 160px);
}

.wp-block-heading + .infographic_popup_image {
    max-height: calc(90vh - 260px);
}

.infographic .wp-block-heading {
    margin-top: var(--wp--preset--spacing--90);
    margin-bottom: var(--wp--preset--spacing--70);
}

.infographic_popup .wp-block-heading {
    margin-top: 0;
    margin-bottom: var(--wp--preset--spacing--70);
}

.infographic_popup_cross {
    position: absolute;
    top: var(--wp--preset--spacing--40);
    right: var(--wp--preset--spacing--40);
}

.infographic_btn {
    position: relative;
    display: flex;
    padding: 0;
    margin: var(--wp--preset--spacing--70) auto 0 auto;
    text-align: center;
    color: var(--wp--preset--color--primary);
    border: none;
    background-color: transparent;
    appearance: none;
    cursor: pointer;
}

.infographic_btn::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M14.6187 1.74351C14.5864 1.66546 14.5386 1.5923 14.4754 1.52871C14.4754 1.52871 14.4735 1.52682 14.4726 1.52588C14.3521 1.40607 14.186 1.33203 14.0026 1.33203H10.0026C9.63441 1.33203 9.33594 1.63051 9.33594 1.9987C9.33594 2.36689 9.63441 2.66536 10.0026 2.66536H12.3931L8.86453 6.19396C8.60418 6.45431 8.60418 6.87642 8.86453 7.13677C9.12488 7.39712 9.54699 7.39712 9.80734 7.13677L13.3359 3.60817V5.9987C13.3359 6.36689 13.6344 6.66536 14.0026 6.66536C14.3708 6.66536 14.6693 6.36689 14.6693 5.9987V1.99916L14.6693 1.9967C14.669 1.90703 14.651 1.82153 14.6187 1.74351Z' fill='%230F695F'/%3E%3Cpath d='M3.61208 13.332L7.14068 9.80344C7.40103 9.54309 7.40103 9.12098 7.14068 8.86063C6.88033 8.60028 6.45822 8.60028 6.19787 8.86063L2.66927 12.3892V9.9987C2.66927 9.63051 2.37079 9.33203 2.0026 9.33203C1.63441 9.33203 1.33594 9.63051 1.33594 9.9987V13.9986C1.33594 14.089 1.35393 14.1753 1.38652 14.2539C1.41882 14.3319 1.46657 14.4051 1.52979 14.4687C1.53073 14.4696 1.53262 14.4715 1.53262 14.4715C1.6621 14.6002 1.83127 14.6649 2.0006 14.6654L2.0026 14.6654H6.0026C6.37079 14.6654 6.66927 14.3669 6.66927 13.9987C6.66927 13.6305 6.37079 13.332 6.0026 13.332H3.61208Z' fill='%230F695F'/%3E%3C/svg%3E");
    position: absolute;
    top: 0;
    right: -20px;
}

.infographic_btn.infographic_popup_close::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.974 3.90229C13.2344 4.16264 13.2344 4.58475 12.974 4.8451L4.97401 12.8451C4.71366 13.1055 4.29155 13.1055 4.0312 12.8451C3.77085 12.5848 3.77085 12.1626 4.0312 11.9023L12.0312 3.90229C12.2915 3.64194 12.7137 3.64194 12.974 3.90229Z' fill='%230F695F'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.0312 3.90229C4.29155 3.64194 4.71366 3.64194 4.97401 3.90229L12.974 11.9023C13.2344 12.1626 13.2344 12.5848 12.974 12.8451C12.7137 13.1055 12.2915 13.1055 12.0312 12.8451L4.0312 4.8451C3.77085 4.58475 3.77085 4.16264 4.0312 3.90229Z' fill='%230F695F'/%3E%3C/svg%3E");
    right: auto;
    left: -20px;
}

.infographic_btn::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    height: 1px;
    width: 100%;
    background-color: var(--wp--preset--color--primary);
}

.infographic_popup_open, 
.infographic_popup_close {
    cursor: pointer;
}

.infographic_popup_cross {
    background: none;
    border: none;
    appearance: none;
    padding: 0;
}