.my-environment-item {

  &__description {
    @include font-style('body--m', 'body--m');

    &.body-copy li {
      padding-left: 25px; // specificity body copy too high for utility class

      &:before {
        margin-left: -25px;
        min-width: 25px;
      }

      +li {
        margin-top: $spacing--xxs; // specificity body copy too high for utility class
      }
    }
  }

  &__content--cta,
  &__description {
    display: flex;
    flex-direction: column;

    a {
      max-width: max-content;
    }
  }

  @include viewport--l {

    &__content {

      &--cta {
        flex-direction: row;
        justify-content: space-between;

        a {
          align-self: flex-end;
        }
      }
    }
  }
}

// TEMP Design for Popover large My Environment until ME Nav is final
// relocate :before element because of missing language toggle in ME

.navigation.my-environment .popover:before {

@include viewport--m {
  right: 80px;
}

@include viewport--l {
  right: 20px;
}

@include viewport--xl {
  right: 60px;
}
}