/* Section - Features (Media Icon Items)
========================================= */
.media-icon-items-grid {
  display: flex;
  flex-direction: column;

  @media (min-width: 750px) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1rem;

    &.media-icon-items-grid-1 {
      grid-template-columns: 1fr;
    }

    &.media-icon-items-grid-3 {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @media (min-width: 1200px) {
    &.media-icon-items-grid-4 {
      grid-template-columns: repeat(4, 1fr);
    }
  }
}

.media-icon-item {
  font-size: calc(var(--font-body-scale) * 1.4rem);
  display: flex;
  flex-direction: row;
  line-height: calc(1 + 0.35 / var(--font-body-scale));
  grid-column-gap: 1rem;
  height: auto;
  align-items: initial;
  position: relative;
  margin: 0.75rem 0;
  width: auto;

  &.media-icon-item-align-center {
    align-items: center;
  }
}

.media-icon-item-subtitle {
  & p {
    margin: 0;
  }
}

.media-icon-item-icon {
  flex: none;
  width: 3.2rem;
  height: 3.2rem;
  line-height: 1;

  .media-icon-items-size-small & {
    width: 2.3rem;
    height: 2.3rem;
  }

  & svg {
    width: 100%;
    height: 100%;
    position: relative;
    top: -0.4rem;
  }

  & img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .media-icon-items-size-small & svg,
  .media-icon-item-align-center & svg {
    top: auto;
  }
}

.media-icon-item-content {
  flex: auto;
  min-width: 1px;
  font-size: calc(var(--font-body-scale) * 1.4rem);
  color: color-mix(in srgb, rgb(var(--color-foreground)), transparent 25%);

  & a {
    color: currentColor;
    text-decoration: underline;
    text-underline-offset: 0.2rem;
    text-decoration-thickness: 0.1rem;

    &:hover {
      color: rgb(var(--color-accent-1));
    }
  }
}

.media-icon-item-title {
  margin-bottom: 0.3rem;
  font-size: calc(var(--font-heading-scale) * 1.8rem);
  font-weight: normal;

  &:only-child {
    margin-bottom: 0;
  }

  .media-icon-items-size-small & {
    margin-top: 3px;
    font-size: calc(var(--font-heading-scale) * 1.4rem);
    font-weight: var(--font-bolder-weight);
  }

  .media-icon-item-align-center & {
    margin-top: 0;
  }
}

.section-features-wrapper:not(.section-features-wrapper-fullwidth) {
  & .section-content {
    padding-left: 2rem;
    padding-right: 2rem;
    border-radius: var(--border-radius-base);

    @media (min-width: 990px) {
      padding-left: 4rem;
      padding-right: 4rem;
    }
  }
}

text-slider {
  display: block;
  position: relative;
  width: 100%;

  & .media-icon-items-grid {
    &::after {
      content: "flickity";
      display: none;
    }

    @media (min-width: 750px) {
      &::after {
        content: "";
      }
    }

    @media (max-width: 749px) {
      &:not(.flickity-enabled) .media-icon-item:not(:first-child) {
        display: none;
      }
    }
  }

  & .media-icon-item {
    width: 100%;
    padding-left: 4rem;
    padding-right: 4rem;

    @media (min-width: 750px) {
      width: auto;
      padding-left: 0;
      padding-right: 0;
    }
  }

  @media (max-width: 749px) {
    & .media-icon-item-align-center.media-icon-item {
      justify-content: center;
    }

    & .media-icon-item-align-center .media-icon-item-content {
      flex: 0 1 auto;
    }
  }

  & .pill-nav-slider-inline-nav {
    opacity: 1;

    & .pill-nav-item-next {
      inset-inline-end: 0;
    }

    & .pill-nav-item-prev {
      inset-inline-start: 0;
    }
  }

  & .pill-nav-slider-inline-nav .pill-nav-item,
  & .pill-nav-item:hover:not(.pill-nav-item-disabled) {
    background: none;
    color: rgb(var(--color-foreground));
    box-shadow: none;
  }

  & .pill-nav-slider-inline-nav .pill-nav-item .angle {
    width: 1.25em;
    height: 1.25em;
  }
}