.region--icons {
  position: relative;

  .auto-grid {
    --c6-grid-min-item-size: 12rem;
    z-index: 1;
  }

  figure {
    gap: 0;
    display: grid;
    justify-items: center;
  }

  svg {
    aspect-ratio: var(--c6-ratio-square);
    inline-size: 4rem;
  }
}
.region--features {
  .headline__title {
    font-size: var(--c6-font-size-fluid-5);
    color: var(--c6-color-primary);
  }

  .headline__sub {
    max-inline-size: unset;
  }

  .card {
    border: 0;
    border-radius: var(--c6-border-radius-lg);
    box-shadow: none;
    transition: all var(--c6-duration-base) ease-out;
    text-align: center;

    &:hover {
      border-radius: var(--c6-border-radius-xl);
    }
  }

  .card__hero {
    aspect-ratio: var(--c6-ratio-widescreen);
  }

  .card__content {
    padding: var(--c6-size-wide);
    padding-block-start: 0;
    margin-block-start: 0;
  }

  .card__footer {
    inline-size: 100%;
    padding: var(--c6-size-wide);
    border: none;
  }

  .card__action {
    color: var(--c6-color-text-1);
  }

  :is(
    .button[data-type='link']:where(
        :not(:active, .active, [disabled], :disabled, .disabled):hover
      )
  ).card__action {
    background-color: rgba(255, 255, 255, 0.25);
  }

  .auto-grid {
    margin-block-end: var(--c6-size-fluid-7);
  }
}

.region--marquee {
  align-items: center;
  background-color: var(--c6-color-px-marquee);
  padding: 0 4rem;
  gap: 6rem;
  border-radius: var(--c6-border-radius-lg);

  @media (max-width: 991px) {
    padding: 4rem;
  }

  .marquee-wrapper-vertical {
    display: flex;
    gap: 1.5rem;
    margin: auto;
    max-block-size: 60vh;

    @media (max-width: 991px) {
      display: none;
    }
  }

  .animate .marquee__content {
    --c6-marquee-duration: 40s;
  }
}

.region--brands {
  .headline__title {
    font-size: var(--c6-font-size-fluid-4);
    color: var(--c6-color-brand-4);
    text-align: center;
    margin-block-end: var(--c6-region-space);
  }

  .wrapper {
    padding-block: var(--c6-size-fluid-7);
  }

  .auto-grid {
    --c6-grid-placement: auto-fit;
  }

  figure {
    display: grid;
    gap: 0;
    justify-items: center;
  }
}

.region--features {
  :is(.card--shuk, .card--shl, .card--ftm, .card--tm, .card--spo, .card--tfm) {
    border-width: var(--c6-border-size-base);
    border-style: var(--c6-border-style-base);
  }

  .card--shuk {
    background-color: var(--c6-color-ui-card-shuk);
    border-color: var(--c6-color-ui-card-shuk);

    &:hover {
      background-color: var(--c6-color-hover-card-shuk);
    }
  }

  .card--shl {
    background-color: var(--c6-color-ui-card-shl);
    border-color: var(--c6-color-ui-card-shl);

    &:hover {
      background-color: var(--c6-color-hover-card-shl);
    }
  }

  .card--ftm {
    background-color: var(--c6-color-ui-card-ftm);
    border-color: var(--c6-color-ui-card-ftm);

    &:hover {
      background-color: var(--c6-color-hover-card-ftm);
    }
  }

  .card--tm {
    background-color: var(--c6-color-ui-card-tm);
    border-color: var(--c6-color-ui-card-tm);

    &:hover {
      background-color: var(--c6-color-hover-card-tm);
    }
  }

  .card--spo {
    background-color: var(--c6-color-ui-card-spo);
    border-color: var(--c6-color-ui-card-spo);

    &:hover {
      background-color: var(--c6-color-hover-card-spo);
    }
  }

  .card--tfm {
    background-color: var(--c6-color-ui-card-tfm);
    border-color: var(--c6-color-ui-card-tfm);

    &:hover {
      background-color: var(--c6-color-hover-card-tfm);
    }
  }
}