.menu--call-to-action-menu {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: $grid-gutter 0;

  @include breakpoint(m) {
    flex-wrap: wrap;
    flex-direction: row;
  }

  .menu-item {
    display: flex;
    border: 2px solid transparent;

    @include breakpoint(m) {
      width: 50%;
      min-height: 8rem;
    }

    > a {
      align-items: center;
      background: linear-gradient(#{ $color-link }, #{$color-bg-link-opacity});
      border-color: transparent;
      border-radius: $button-border-radius;
      color: $color-text-inverted;
      display: flex;
      height: 100%;
      padding: $grid-gutter;
      width: 100%;

      &:before {
        @include fa-icon();
        @extend %fas;
        color: inherit;
        content: '\2b';
        font-size: $font-size-icon;
        padding-right: $grid-gutter;
      }

      &:hover,
      &:focus {
        background: $color-interaction;
      }

      &:active {
        background: transparent;
        border-color: $color-interaction;
        color: $color-interaction;
      }
    }
  }
}
