/* BLOCK: Feature List */

.block-feature-list {
    isolation: isolate;
    background-color: var(--block-bg-color, var(--c-bg-light));
}

.block-feature-list .text-content {
    max-width: 49.5rem;
    margin-inline: auto;
    margin-bottom: 8.25rem;
    text-align: center;
}

.block-feature-list .text-content .stamp {
    margin-left: auto;
    width: auto;
    max-width: 11.25rem;
    height: auto;
    max-height: 8.75rem;
}

.is-dark.block-feature-list .text-content .stamp g path {
    fill: var(--c-text-light);
}

.block-feature-list .text-content .cursive {
    margin-right: 1.25em;
    margin-bottom: 0.15em;
}

.block-feature-list .text-content p {
    margin-block: 0;
}

.block-feature-list .text-content p:not(:first-child) {
    margin-top: 5rem;
}

.block-feature-list .feature-list-wrapper {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  gap: 8rem;
}

.block-feature-list .feature-list-featured-image {
  flex: 1 1 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: transparent;
}

.block-feature-list .feature-list-featured-image img {
  width: 100%;
  /* height: 100%; */
  object-fit: cover;
  object-position: center;
  display: block;
  -webkit-backface-visibility: hidden;
  image-rendering: auto;
  aspect-ratio: 0.877;
}

.block-feature-list .feature-list-items {
  flex: 1 1 42%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* gap: 2.5rem; */
}

.block-feature-list .feature-list-item {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  gap: 0.65em;
  width: fit-content;
  padding-left: 0;
  transition: padding-left 0.3s ease;
  padding: 1.25rem 0;
  text-decoration: none;
}

.block-feature-list .feature-list-item:hover {
  padding-left: 1.5rem;
}

.block-feature-list .feature-list-item-title {
  text-transform: uppercase;
  /* font-size: clamp(1.5rem, 2.5vw, 2rem); */
  font-size: var(--font-36-24);
  font-family: var(--ff-dream-orphans);
  /* font-weight: 700; */
  line-height: 1;
  color: var(--c-primary);
}

.block-feature-list.is-dark .feature-list-item-title {
  color: var(--c-text-light);
}

.block-feature-list .feature-list-item-number {
  /* font-size: 0.6em; */
  font-size: var(--font-16-12);
  /* font-weight: 600; */
  line-height: 1;
  align-self: flex-start;
  transform: translateY(0.05em);
  color: var(--c-secondary);
}

.block-feature-list .feature-list-item:hover .feature-list-item-number {
  color: var(--c-tertiary);
}

@media screen and (width <= 1200px) {
  .block-feature-list .feature-list-wrapper {
    gap: 4rem;
  }

  .block-feature-list .feature-list-featured-image {
    flex: 1 1 55%;
  }

  .block-feature-list .feature-list-items {
    flex: 1 1 45%;
    gap: 1rem;
  }

  /* .block-feature-list .feature-list-item-title {
    font-size: clamp(1.2rem, 2.2vw, 1.7rem);
  } */

  .block-feature-list .feature-list-item:hover {
    padding-left: 1rem;
  }
}

@media screen and (width <= 620px) {
    .block-feature-list .text-content .stamp {
        margin: 0 auto;
        /* margin-right: 6rem; */
        max-width: 6.25rem;
        margin-bottom: 2.5rem;
        margin-inline: auto;
    }

    .block-feature-list .text-content .cursive {
        margin: 0 auto 0.2em;
    }

    .block-feature-list .text-content p:not(:first-child) {
        margin-top: 3.75rem;
    }

    .block-feature-list .feature-list-wrapper {
      gap: 2rem;
    }

    .block-feature-list .feature-list-featured-image {
      flex: 1 1 50%;
    }

    .block-feature-list .feature-list-items {
      flex: 1 1 50%;
      /* gap: 0.8rem; */
      gap: 1.5rem;
    }

    /* .block-feature-list .feature-list-item-title {
      font-size: clamp(0.8rem, 3vw, 1.5rem);
    } */

    .block-feature-list .feature-list-item:hover {
      padding-left: 0.75rem;
    }

    .block-feature-list .feature-list-featured-image {
      display: none;
    }

    .block-feature-list .feature-list-items {
      flex: 100%;
      align-items: center;
    }

    .block-feature-list .text-content {
      margin-bottom: 3.75rem;
    }

    .block-feature-list .feature-list-item {
      flex-direction: column-reverse;
      align-items: center;
    }

    .block-feature-list .feature-list-item-number {
      width: 100%;
      text-align: center;
    }
}