.feature {
  margin-left: var(--space-x-small-breakpoint-container);
  margin-right: var(--space-x-small-breakpoint-container);
  position: relative;

  .feature-inner .feature-item {
    align-items: var(--horizontal-alignment-feature-item);
    background: var(--background-feature);
    border-color: var(--border-color-feature);
    border-radius: var(--border-radius-feature);
    border-style: solid;
    border-width: var(--border-width-feature);
    display: flex;
    flex-direction: column;
    padding: var(--space-y-small-breakpoint-feature) var(--space-x-small-breakpoint-feature);
    position: relative;
    text-align: var(--horizontal-alignment-feature-item);

    .feature-icon {
      background: var(--background-feature-icon);
      border-radius: var(--border-radius-feature-icon);
      display: inline-flex;
      margin-bottom: var(--space-y-block-small-breakpoint-feature-icon);
      padding: var(--space-y-small-breakpoint-feature-icon)
        var(--space-x-small-breakpoint-feature-icon);
      width: fit-content;

      svg {
        color: var(--color-feature-icon);
        height: var(--size-feature-icon);
        width: var(--size-feature-icon);
      }
    }

    .feature-text {
      .feature-headline {
        & h1,
        & h2,
        & h3,
        & h4,
        & h5,
        & h6,
        & span {
          color: var(--color-feature-headline);
          display: block;
          font-family: var(--font-text);
          font-size: var(--size-small-breakpoint-feature-headline);
          font-weight: var(--weight-feature-headline);
          line-height: var(--line-height-small-breakpoint-feature-headline);
          margin-bottom: var(--space-y-block-small-breakpoint-feature-headline);
          transition: all 0.4s ease;
        }
      }

      .feature-button .feature-button-primary {
        font-size: 0;
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        width: 100%;
      }

      .feature-paragraph {
        color: var(--color-feature-paragraph);
        font-size: var(--size-small-breakpoint-feature-paragraph);
        font-weight: var(--weight-feature-paragraph);
        line-height: var(--line-height-small-breakpoint-feature-paragraph);
      }
    }
  }
}

.feature-grid {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;

  .feature-item:not(:last-child) {
    margin-bottom: var(--space-y-block-small-breakpoint-feature-grid-item);
  }
}

@media (width >= 768px) {
  .feature {
    margin-left: var(--space-x-medium-breakpoint-container);
    margin-right: var(--space-x-medium-breakpoint-container);

    .feature-inner .feature-item {
      padding: var(--space-y-medium-breakpoint-feature) var(--space-x-medium-breakpoint-feature);

      .feature-icon {
        margin-bottom: var(--space-y-block-medium-breakpoint-feature-icon);
        padding: var(--space-y-medium-breakpoint-feature-icon)
          var(--space-x-medium-breakpoint-feature-icon);
      }

      .feature-text {
        .feature-headline {
          & h1,
          & h2,
          & h3,
          & h4,
          & h5,
          & h6,
          & span {
            font-size: var(--size-medium-breakpoint-feature-headline);
            line-height: var(--line-height-medium-breakpoint-feature-headline);
            margin-bottom: var(--space-y-block-medium-breakpoint-feature-headline);
          }
        }

        .feature-paragraph {
          font-size: var(--size-medium-breakpoint-feature-paragraph);
          line-height: var(--line-height-medium-breakpoint-feature-paragraph);
        }
      }
    }
  }

  .feature-grid {
    flex-direction: row;
    gap: var(--gap-feature-grid);

    .feature-item {
      flex: 1 0 calc(50% - var(--gap-feature-grid));
      max-width: calc(50% - var(--gap-feature-grid) / 2 * 1);
      width: auto;
      &:not(:last-child) {
        margin-bottom: var(--space-y-block-medium-breakpoint-feature-grid-item);
      }
    }
  }
}

@media (width >= 992px) {
  .feature {
    margin-left: var(--space-x-large-breakpoint-container);
    margin-right: var(--space-x-large-breakpoint-container);
    max-width: var(--max-width-container-large);

    .feature-inner .feature-item {
      padding: var(--space-y-large-breakpoint-feature) var(--space-x-large-breakpoint-feature);

      .feature-icon {
        margin-bottom: var(--space-y-block-large-breakpoint-feature-icon);
        padding: var(--space-y-large-breakpoint-feature-icon)
          var(--space-x-large-breakpoint-feature-icon);
      }

      .feature-text {
        .feature-headline {
          & h1,
          & h2,
          & h3,
          & h4,
          & h5,
          & h6,
          & span {
            font-size: var(--size-large-breakpoint-feature-headline);
            line-height: var(--line-height-large-breakpoint-feature-headline);
            margin-bottom: var(--space-y-block-large-breakpoint-feature-headline);
          }
        }

        .feature-paragraph {
          font-size: var(--size-large-breakpoint-feature-paragraph);
          line-height: var(--line-height-large-breakpoint-feature-paragraph);
        }
      }
    }
  }

  .feature-grid {
    flex-direction: row;
    gap: var(--gap-feature-grid);

    .feature-item:not(:last-child) {
      margin-bottom: var(--space-y-block-large-breakpoint-feature-grid-item);
    }

    &.feature-grid--2 .feature-item {
      flex: 1 0 calc(50% - var(--gap-feature-grid));
      max-width: calc(50% - var(--gap-feature-grid) / 2 * 1);
      width: auto;
    }

    &.feature-grid--3 .feature-item {
      flex: 1 0 calc(33.3333% - var(--gap-feature-grid));
      max-width: calc(33.3333% - var(--gap-feature-grid) / 3 * 2);
      width: auto;
    }

    &.feature-grid--4 .feature-item {
      flex: 1 0 calc(25% - var(--gap-feature-grid));
      max-width: calc(25% - var(--gap-feature-grid) / 4 * 3);
      width: auto;
    }
  }
}

@media (width >= 1200px) {
  .feature {
    max-width: var(--max-width-container-extralarge);
  }
}

@media (width >= 1300px) {
  .feature {
    margin-left: auto;
    margin-right: auto;
  }
}