/* Block Styles */
.hero-image-content-content-wrapper {
    display: grid;
    grid-template-columns:3fr 2fr;
    gap: 5rem;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}
.image-position-left .hero-image-content-content-wrapper {
    grid-template-columns:2fr 3fr;
}
@media (max-width: 768px) {
    .hero-image-content-content-wrapper {
        /* padding: 4rem 2rem; */
        grid-template-columns:1fr !important;
    }
}
.image-position-right .hero-image-content-text-wrapper {
    order: -1
}

.hero-image-content-content {
    margin-top: 2em;
}
.hero-image-content-gallery {
    display: flex;
    flex-direction: column;
    position: relative;
}
.hero-image-content-content-wrapper .hero-title {
    text-align: left;
}
.hero-image-content-content :is(ul,ol) {
    margin: 1em 0;
    padding: 0 0 0 2em;
}
.hero-image-content-content li {
    margin: 1em 0;
    padding: 0
}
.hero-image-content-content-wrapper .hero-button-row {
    justify-content: flex-start
}
.hero-checklist .hero-image-content-content ul {
    list-style: none;
    padding-left: 4em;
}
.hero-checklist .hero-image-content-content ul li {
    position: relative;
}
.hero-checklist .hero-image-content-content ul li:before   {
    content:'';
    background: 
        var(--primary-color) 
        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-check"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l5 5l10 -10" /></svg>')
        50% 50% no-repeat;
    position: absolute;
    width:40px;
    height: 40px;
    display:flex;
    right: calc(100% + 0.7em);
    outline:1px solid red;
    border-radius:100px;
} 
:is(.hero-checklist, .hero-number-list) .hero-image-content-content li> strong:first-child {
    font-size: 1.2em;
    font-weight: 800;
    padding: 0.2em 0;
    display: inline-flex
}
.hero-image-content-gallery img {
    border-radius: 1.5em;
}
.hero-images-overlap .hero-image-content-gallery img:nth-of-type(1):nth-last-of-type(2) {
    width: 70%;
    margin-bottom: 4em
}
.shaded-background {
    --section-background-color: var(--shaded-background-color);
}
.hero-images-overlap .hero-image-content-gallery img:nth-of-type(2):nth-last-of-type(1) {
    width: 70%;
    position: absolute;
    right: 0;
    bottom: 0;
    border: 1em solid var(--section-background-color, #fff);
    box-sizing:content-box;
    border-radius: 2.5em;
    margin-right:-1em
}


.hero-number-list ol {
  list-style: none; /* Remove default list markers */
  counter-reset: list-counter; /* Initialize a counter for the list */
  padding-left: 0; /* Remove default left padding */
}

.hero-number-list li {
  list-style: none;
  position: relative; /* Allow positioning of the pseudo-element */
  margin-bottom: 1em; /* Add some spacing between list items */
  padding-left: 3.1em; /* Create space for the circle */
}

.hero-number-list li::before {
  content: counter(list-counter); /* Display the counter value */
  counter-increment: list-counter; /* Increment the counter for each item */
  position: absolute;
  left: 0;
  top: 0;
  width: 40px; /* Set width and height for the circle */
  height: 40px;
  line-height: 2em; /* Vertically center the number */
  text-align: center; /* Horizontally center the number */
  border-radius: 50%; /* Make it a circle */
  background-color: var(--primary-color); /* Circle background color */
  color: white; /* Number color */
  font-weight: bold;
  font-size: 1.2em;
}